简述一下 `@media` 的媒体类型

2018-12-28

回答

@media 是可根据一个或多个基于媒体特征、媒体类型等条件来使用样式的规则。其包含以下四种媒体类型：

• all：适用于所有设备，默认选项
• print：仅适用于打印设备
• screen：仅适用于台式机、平板电脑、手机等屏幕
• speech：仅适用于屏幕阅读器

加分回答

• 其余的媒体类型：tty，tv，projection，handheld，braille，embossed，aural 在 Media Queries Level 3 中已被废弃
• 可以使用逻辑操作符（,，only，and，not）组合媒体类型
• iPhone X 系列存在安全距离，其 @media 识别如下：

// iPhone XR 1792x828px at 326ppi
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
    ...
}
// iPhone XS 2436x1125px at 458ppi
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    ...
}
// iPhone XS Max 2688x1242px at 458ppi
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    ...
}

返回总目录

每天 30 秒