CSS 媒体查询和响应式断点

CSS媒体查询

在 CSS 中可以区分屏幕和打印机做不同的样式处理:

<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="print" href="print.css">

上面代码表示 screen.css 只会在设备屏幕中起作用,而 print.css 样式表只会在打印机中起作用。

在 CSS3 中除了能区分屏幕和打印机外,还可以根据屏幕的尺寸等特征来区分。

媒体类型

描述
all用于所有设备
aural已废弃。用于语音和声音合成器
braille已废弃。 应用于盲文触摸式反馈设备
embossed已废弃。 用于打印的盲人印刷设备
handheld已废弃。 用于掌上设备或更小的装置,如PDA和小型电话
print用于打印机和打印预览
projection已废弃。 用于投影设备
screen用于电脑屏幕,平板电脑,智能手机等。
speech应用于屏幕阅读器等发声设备
tty已废弃。 用于固定的字符网格,如电报、终端设备和对字符有限制的便携设备
tv已废弃。 用于电视和网络电视

媒体功能:

描述
aspect-ratio定义输出设备中的页面可见区域宽度与高度的比率
color定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
color-index定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
device-aspect-ratio定义输出设备的屏幕可见宽度与高度的比率。
device-height定义输出设备的屏幕可见高度。
device-width定义输出设备的屏幕可见宽度。
grid用来查询输出设备是否使用栅格或点阵。
height定义输出设备中的页面可见区域高度。
max-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。
max-color定义输出设备每一组彩色原件的最大个数。
max-color-index定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height定义输出设备的屏幕可见的最大高度。
max-device-width定义输出设备的屏幕最大可见宽度。
max-height定义输出设备中的页面最大可见区域高度。
max-monochrome定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution定义设备的最大分辨率。
max-width定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color定义输出设备每一组彩色原件的最小个数。
min-color-index定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width定义输出设备的屏幕最小可见宽度。
min-device-height定义输出设备的屏幕的最小可见高度。
min-height定义输出设备中的页面最小可见区域高度。
min-monochrome定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution定义设备的最小分辨率。
min-width定义输出设备中的页面最小可见区域宽度。
monochrome定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
orientation定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
scan定义电视类设备的扫描工序。
width定义输出设备中的页面可见区域宽度。

可以这样指示表示屏幕分别在 大于48rem(最小宽度48rem) 和 大于64rem 的情况下页面显示样式 :

<link rel="stylesheet" media="screen and (min-width: 48rem)"
href="medium.css">
<link rel="stylesheet" media="screen and (min-width: 64rem)"
href="large.css">

当然也可以在 css 样式文件中使用 @media 标签嵌入的方式来实现:

@media (mine-width: 48rem){
    .figure--horizontal-reverse {
        display: flex;
        flex-direction: row-reverse;
    }
}

现在的问题是我们应该从什么屏幕尺寸进行分割来显示不同的样式,到底是 900px 还是 1000 px 或者其他位置来分割样式?

不同屏幕尺寸显示

响应式断点

基于屏幕尺寸

定义响应式断点通常是为了适应内容,而不是适应设备尺寸,但是如果我们使用只兼容特定设备(比如 iPhone 6s),也可以根据设备的宽度来决定。

一般情况下我们只需要将常见的的几个屏幕尺寸样式编成一组放在一起,例如下面这组屏幕的响应式断点:

/* 768px/16px (base font size) = 48rem */
@media (min-width: 48rem) {
[…]
}
/* 1024px/16px (base font size) = 64em */
@media (min-width: 64em) {
[…]
}
/* 1220px/16px (base font size) = 76.25em */
@media (min-width: 76.25em) {
[…]
}
/* 1400px/16px (base font size) = 87.5em */
@media (min-width: 87.5em) {
[…]
}

细心的你可能会发现我这里用的单位都是 em 而不是 px, 建议在使用 @media 标签的时候单位使用 em 或者 rem 这种相对单位。

  • em : 是相对长度单位, 相对于当前对象内文本的字体尺寸, 如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
  • rem : 是CSS3新增的一个相对单位(是 root em 缩写), 和 em 不同的是它相对的只是 HTML 根元素, 通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

基于屏幕方向

除了根据屏幕尺寸来设置响应式断点外,比较常用的是通过屏幕的方向来设置:

@media (orientation:portrait) {
    .figure {
        display : flex;
        flex-direction : row-reverse;
    }
}

基于宽高比例

大部分项目都不会用到宽高比例来设置响应式,然而有时候我们可能需要根据宽高比来适应特定的比例尺寸,可以使用 aspect-ratiodevice-aspect-ratio.

  • aspect-ratio 浏览器窗口相关的宽高比例。
  • device-aspect-ratio 设备的宽高比例。

    @media (device-aspect-ratio: 4/3) {
    […]
    }
    
    @media (device-aspect-ratio: 16/9) {
    […]
    }
    

混合查询

可以使用 and , not 和 only 这样的连接词实现查询条件, 例如:

@media screen
and (min-width: 48rem) {
    […]
}
@media only screen
and (min-device-height: 56.25rem)
and (device-aspect-ratio: 16/10) {
    […]
}

在行高上的应用

一般我们的行高应该随着文字的尺寸的改变而改变,可以这样来设置:

p {
    line-height : 1.4; 
}

@media (min-width: 48rem) {
    p {
        line-height : 1.5; 
    }
}

@media (min-width: 64rem) {
    p {
        line-height : 1.6; 
    }
}

在最小的屏幕上面设置行高 1.4 ,随着屏幕增大,我们的文字的行高也相应的增加,这样可以极大提升排版体验。

特征查询

除了我们使用 @media 标志来查询外,其实还有特征查询标志 @supports 来为支持特定 CSS 声明的浏览器,添加独有的样式内容。

比如有的浏览器不支持 flex 或者 column 我们可以只针对支持的浏览器做一些特殊的样式:

@supports (display:flex) {
    .figure--horizontal figcaption {
        display : flex;
    }
}

@supports (column-span:all) {
    section {
        column-count : 2; 
    }
}

@supports not (column-span:all) {
    section {
        padding : 0 4rem; 
    }
}

@supports (column-count:2) or (-webkit-column-count:2) {
    section {
        column-count : 2; 
    }
}