CSS3 媒体查询

能够让网站针对不同的浏览器和设备呈现不同显示效果

引入媒体查询

媒体查询写在CSS样式代码的最后,CSS是层叠样式表,在同一特殊性下,靠后的的样式会重叠前面的样式

可以使用 not,and 和 only 等逻辑操作符构建复杂的媒体查询

  • and 操作符用来把多个 媒体属性 组合成一条媒体查询。只有当每个属性都为真时,结果才为真。
  • not 操作符用来对一条媒体查询的结果进行取反。
  • only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。

举例
当宽度小于300px时,使背景颜色变化

@media screen and (max-width: 300px) {
  body {
        background-color:lightblue;
    }
}

媒体查询的参数

  • 设备宽度:device-width | min-device-width | max-device-width

  • 设备高度:device-height | min-device-height | max-device-height

  • 设备宽度比:device-aspect-ratio: 16/9

  • 设备方向:orientation: portrait / landscape

  • 设备输出分辩率:min-resolution: 300dpi | min-resolution: 2dppx

  • 屏幕像素比:min-device-pixel-ratio: 2 | min–moz-device-pixel-ratio | -webkit-min-device-pixel-ratio

  • 渲染区域的宽度: width | min-width | max-width

  • 渲染区域的高度: height | min-height | max-height

  • 设备输出分辩率(打印分辩率):dpi, dpcm, dppx

  • 指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或每厘米(dpcm)的点数来表示。

  • 横竖屏的判断
    @media (orientation : landscape){ /* 横屏 / }
    @media (orientation : portrait){ /
    竖屏 */ }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、 HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签? HTML5是...
    不是我的简书阅读 853评论 0 0
  • 媒体类型 媒体查询规则
    Adapa阅读 204评论 0 0
  • 语法结构及用法:@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二...
    寿_司阅读 209评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,339评论 0 11
  • 夫人,世难圣;立不贤;宅无志。 古人云:行万里路,破万卷书。此志士之境也。 但云隐洒于世,而不悖其志者,贤鲜也。 ...
    代峰语阅读 310评论 0 1