CSS媒体查询语法概论

1. 媒体查询语法

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max- 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max- 600px) {
  #con{
     100px;
  }
}
</style>

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的） */

/* 小屏幕（平板，大于等于 768px） */
@media (min- @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min- @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min- @screen-lg-min) { ... }

@media (max- @screen-xs-max) { ... }
@media (min- @screen-sm-min) and (max- @screen-sm-max) { ... }
@media (min- @screen-md-min) and (max- @screen-md-max) { ... }
@media (min- @screen-lg-min) { ... }
复制代码

2. 逻辑操作符

2.1 and表示且，当所有的条件满足的时候返回true

//一个基本的媒体查询，即一个媒体属性和默认指定的all媒体类型
@media (min-700px){}

//如果你只想再横屏时候应用,你可以使用and操作符合并媒体属性
(min-700px)and(orientation:landscape){}

//如果你仅想在电视媒体上应用
@media tv and (min-700px) and (orientation:landscape){}
复制代码

2.2 逗号分隔列表

媒体查询中使用逗号分隔效果等同于or逻辑操作符

//如果你想在最小宽度为700像素或者横屏的手持设备上应用
@media (min-700px),handheld and (orientation:lanscape){}
复制代码

2.3 not

使用关键词“not”是用来排除某种制定的媒体类型

@media not all and (monochrome) { ... }
等价于
@media not (all and (monochrome)) { ... }

@media not screen and (color), print and (color)
等价于
@media (not (screen and (color))), print and (color)
复制代码

2.4 only

only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。其主要有：支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，因为其先会读取only而不是screen

3. 媒体类型

@media (max- 600px) {
  #con{
     100px;
  }
}
复制代码

不填写则默认媒体类型为all

4. 媒体特征

4.1 宽高比：aspect-ratio，接受min/max

可以理解为文档区域的宽高比

//这指定了宽高比或者1：1或者更大。换句话说，可视区域或者是正方形或者是宽屏。
@media screen and (min-aspect-ratio: 1/1) { ... }
复制代码

4.2 设备宽高比：device-aspect-ratio，接受min/max

描述了输出设备屏幕区域的宽高比

//宽高比或者16：9或者16：10。
@media screen and (device-aspect-ratio: 16/9), 
screen and (device-aspect-ratio: 16/10) { ... }
复制代码

4.3 设备宽度/设备高度：device-height/device-width，接受min/max

整个屏幕或页的高度/宽度

4.4 方向：orientation

指定了设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式

//竖屏
@media all and (orientation: portrait) { ... }
//横屏
@media all and (orientation: landscape) { ... }

作者：酒阑人散
链接：https://juejin.im/post/5affd7ff6fb9a07aa2139ebb
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。