Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

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

2018-12-28

回答

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

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

加分回答

  • 其余的媒体类型:ttytvprojectionhandheldbrailleembossedaural 在 Media Queries Level 3 中已被废弃
  • 可以使用逻辑操作符(,onlyandnot)组合媒体类型
  • 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 秒


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步