Aitter's Blog

CSS媒体查询的应用

在CSS3中添加的媒体查询,允许内容的呈现针对一个特定范围的输出设备而定制,而不必改变内容本身。
Media Queries能在不同的条件下使用不同的样式,使用页面达到不同的渲染效果。

MDN CSS媒体查询

媒体类型

  1. all 所有媒体
  2. braille 盲文触觉设备
  3. embossed 盲文打印机
  4. print 手持设备
  5. projection 打印预览
  6. screen 彩屏设备
  7. speech ‘听觉’类似的媒体类型
  8. tty 不适用像素的设备
  9. tv 电视

媒体类型

@media screen {
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print {
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print {
p.test {font-weight:bold;}
}
/*移动端样式*/
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

sans - serif 字体比较适合在屏幕上阅读,而 serif 字体更容易在纸上阅读。

媒体查询包含一个可选的媒体类型和零个或多个满足CSS3规范的表达式.

  • 表达式描述了媒体特征, 最终会被解析为 truefalse.
  • 如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型, 并且所有的表达式的值都是 true, 那么该媒体查询的结果为 true
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>

逻辑操作符

可以使用 notandonly 等逻辑操作符构建复杂的媒体查询。

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

若使用了 notonly 操作符,必须明确指定一个媒体类型。默认为 all 所有媒体类型。

and 用于合并多个媒体属性或合并媒体属性与媒体类型

@media (min-width: 700px) and (orientation: landscape) { ... }
@media tv and (min-width: 700px) and (orientation: landscape) { ... }
/* 逗号分隔相当于or操作符 */
@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not 用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

only 仅在媒体查询匹配成功的情况下应用指定样式

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

语法

@media mediatype and | not | only (media feature) { css-code; }

常用媒体属性

  • 设备宽度: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)的点数来表示。

每英寸包含点的数量(dots per inch)

普通屏幕通常包含96dpi,一般将2倍于此的屏幕称之为高分屏,即大于等于192dpi的屏幕,比如Mac视网膜屏就达到了192dpi(即2dppx),打印时一般会需要更大的dpi;
1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

分辨率PPI与DPI

Media query只接受单个的逻辑表达式作为其值或者没有值

Media Query其中的大部分接受min/max前缀,用来表示其逻辑关系,表示应用于大于等于或者小于等于某个值的情况著作权归作者

横竖屏的判断

@media (orientation : landscape){ /* 横屏 */ }
@media (orientation : portrait){ /* 竖屏 */ }

注意部分 Android 中有bug
当输入框获得焦点,触发弹出键盘后,横屏的样式出现了,然而他使用的是竖屏,并未把手机横过来。

添加宽度限制,屏幕宽度大于450px时,并且是横屏时,应用横屏样式

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape){
// CSS Style
}
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait){
// CSS Style
}

高清图片适配

在普通屏下使用@1x图片,在高清屏下使用@2x图片

/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */
.bg{
background-image: url(img_1x.png);
}
/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图 */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 120dpi),
only screen and (min-resolution: 1.25dppx){
ratio:1.5){
.bg{
background-image: url(img_2x.png);
}
}

屏幕适配

移动端配合 rem 使用,适配不同宽度的屏幕

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

适配独立的样式文件

<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/print.css" rel="stylesheet" type="text/css" media="print" />
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

设备判断

@media screen and (device-aspect-ratio: 40/71) {}
或者:
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){}

调整模块的样式

@media screen and (max-width: 980px) {
#pagewrap {
width: 95%;
}
#content {
width: 60%;
padding: 3% 4%;
}
#sidebar {
width: 30%;
}
#sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
}

Media所有参数汇总

  • width: 浏览器可视宽度。
  • height: 浏览器可视高度。
  • device-width: 设备屏幕的宽度。
  • device-height: 设备屏幕的高度。
  • orientation: 检测设备目前处于横向还是纵向状态。
  • aspect-ratio: 检测浏览器可视宽度和高度的比例。(例如:aspect-ratio: 16/9)
  • device-aspect-ratio: 检测设备的宽度和高度的比例。
  • color: 检测颜色的位数。(例如:min-color: 32就会检测设备是否拥有32位颜色)
  • color-index: 检查设备颜色索引表中的颜色,他的值不能是负数。
  • monochrome: 检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)
  • resolution: 检测屏幕或打印机的分辨率。(例如:min-resolution: 300dpi或min-resolution: 118dpcm)。
  • grid: 检测输出的设备是网格的还是位图设备。