响应式css

一、媒体查询

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

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

当媒体查询为true时，其对应的样式表或样式规则就会遵循正常的级联规则进行应用。即使媒体查询返回false,<link>标签指向的样式表也会被下载(但是它们不会被应用)

除非使用not或only操作符，否则媒体类型是可选的，默认值是all(全部).

逻辑操作符：not、and 和 only

and

@media tv and (min-width: 700px) and (orientation: landscape) { ... }

上面媒体查询仅在电视媒体上，可视区域不小于700像素宽度并且是横屏时有效。

逗号

可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。

@media (min-width:700px), handheld and (orientation: landscape){ ... }

上文，如果是一个大于700px宽的屏幕设备，或者 是一个横屏手持设备，整个媒体查询返回真。

not

@media not screen and (color), print and (color)

//等价于

@media (not (screen and (color))), print and (color)

only

only关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

 

二、断点设置

bootstrap4:

/ 默认为手机端样式

// 等于或大于 34*16 = 544px（手机横屏）
@media (min-width: 34em) { ... }

// 等于或大于 48*16 = 768px(平板竖屏)
@media (min-width: 48em) { ... }

// 等于或大于  62*16 = 992px（pc窄屏）
@media (min-width: 62em) { ... }

// 等于或大于 75*16 = 1200px（ pc宽屏）
@media (min-width: 75em) { ... }

// pc超大屏 1380px
@media (min-width: 1380px) { ... }

断点的设置跟站点的内容，用户设备的分辨率，用户规模和成本计算都息息相关，所以这些都应该考虑进去，而不是盲目的抄来就用。

 

摘自：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries；

　　　http://imweb.io/topic/56dff5121a5f05dc506430da