css

CSS3 @media 查询 - 根据屏幕尺寸采用不同的展示效果

根据不同的页面宽度来执行不同的样式

常用于移动端排版布局使用,响应式开发。

参考:

https://www.runoob.com/cssref/css3-pr-mediaquery.html

定义和使用

使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。

CSS 语法

@media mediatype and|not|only (media feature) {
   CSS-Code;
}

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

例子:

https://oss.getimg.net/demo/webpage/2019/05-27.html

2019-05-27
css

CSS3 里通过伪元素添加内容的时候,如何连续输出多个空格?

2019-5-27 9:48:02

css

移动端超级链接突出边框

2019-5-30 16:16:19

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,未经Npcink作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 QQ: 1355471563 或 点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索