拯救多端响应视图-媒体查询

2016-09-11

2024-09-07

css

媒体查询与响应式设计

某日，我兴冲冲的发了个链接给列表里的某同学：

Me: hi! 快来看看我新上线的博客，整体设计可是对数十个优秀页面的设计进行的像素级复制呢！

(某同学直接在手机上点开了链接)

某同学：wtf .. 整个页面好几处内容错位了，而且还在水平方向滑来滑去的，啊好难受，我的强迫症

Me: … ? (你就不能用电脑打开吗)

现在移动设备越来越普遍，页面在移动端的可访问性已经成为流量的一大推动作用(或者阻碍作用)，响应式设计势在必行，Css3 中添加了媒体查询, 允许我们在css中定义：在什么样的特性下对哪些元素应用哪些css规则，其中特性就包括了当前的页面大小，当前的设备类型，以及一些其他比较细的用户设备的特性，并且允许定义多个特性的逻辑组合，从而使得页面能在多种设备以及设备状态下都有良好的表现.

根据设备类型查询

例如：

@media print {
	/* 该括号里的规则会在打印设备上应用 */
	.layout {
		width: 80%;
	}
	/* ... */
}

@media screen {
	/* 该括号里的规则会在屏幕输出设备上应用 */
	.layout {
		width: 100%;
	}
	/* ... */
}

根据设备的媒体特性查询

媒体特性指的是当前设备的一些特征和状态，例如常用的一些有：

@media (max-width: 1000px){
	/* 该括号里的规则会在当前设备的视口小于等于1000px时应用 */
}

@media (min-width: 500px) {
	/* 该括号里的规则会在当前设备的视口大于等于500px时应用 */
}

@media (color) {
	/* 该括号里的规则会在当前设备支持色彩时应用 */
}

比较常见的需求有：

例如我们有一个包含左侧信息栏(可以是导航，或者博客的大纲之类)和右侧主体内容的页面，但是这样的布局通常只适应电脑屏幕这样的相对较大的分辨率，当我们使用手机访问页面的时候，如果这样的侧边栏继续存在就会显得特别奇怪，所以我们通常可以用媒体查询的 max-width 特性来处理, 当视口小于某个值的时候，我们就认为当前设备是移动设备，应当隐藏侧边栏，或者将侧边栏移到上方与主题内容分行显示，这时在 @media 里对相应的元素做显示规则设置即可

更多支持的特性可以在 MDN 查到

复杂媒体查询

媒体查询支持将上述一些简单的查询条件通过逻辑运算符组合起来形成比较复杂的匹配条件，逻辑运算非常直观，支持的运算有 与(and), 或(, 这里用的是 comma-separated list), 非(not), 除此之外还有一个 only 关键字用来排除那些不支持媒体查询的老旧浏览器.

and

1
2
3

@media screen and (min-width: 600px){
	/* 当前设备有屏幕并且当前页面宽度大于等于600px时应用规则 */
}

comma-separated list

其实个人觉得就是或运算，通过逗号列出一系列查询，其中某一条查询满足时就执行其中的规则

@media print and (max-width: 1000px) ,screen and (min-width: 600px){
	/* 当前设备是打印设备并且当前页面宽度小于等于1000px时，
		或者当前设备有屏幕并且页面宽度大于等于600px时应用规则 */
}

not

not 一般出现在每条查询的起始，并且否定的是整条查询，也就是计算顺序是最后的

1
2
3

@media not all and (monochrome) {
	/* ... */
}

计算顺序如下

1
2
3

@media not (all and (monochrome)) {
	/* ... */
}

如果使用了comma-separated list 使得多条规则存在的情况下， not 关键字否定的也只是一条规则：

1
2
3

@media not screen and (color), print and (color) {
 /* ... */
}

计算顺序如下：

1
2
3

@media (not screen and (color)), print and (color) {
 /* ... */
}

* 需要注意的是, 默认情况下，如果不指定媒体类型是 screen 还是 print 或者是其他类型，media type 是使用 all 的，也就是应用于所有类型设备，但是如果使用了关键字 not 或者 only 那么必须显式指定 media type

◉ End.

参考资料:

如博文有叙述不妥以及不准确的地方, 望各位看客不吝赐教, 感谢.

uncategorized

根据设备类型查询

根据设备的媒体特性查询

复杂媒体查询

and

comma-separated list

not