🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

简述一下 `@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 秒


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

推荐阅读
留下你的脚步