共计 1664 个字符,预计需要花费 5 分钟才能阅读完成。
CSS 媒体查问
媒体查问为不同设施之间做款式的适配提供了很好的解决形式,也可能提供一些辨认不同设施的形式。
惯例应用
媒体查问能够有以下三种应用形式:
1、<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
2、@import url(example.css) screen and (color);
3、@media screen {* { font-family: sans-serif}
}
媒体个性(罕用)
width: (max-width、min-width)
实用于视觉和触觉媒体类型,不能指定负值
以下媒体查问例子示意该样式表实用于视口(文件渲染的局部屏幕 / 纸张)宽度在 400 至 700 像素之间的设施:
@media screen and (min-width: 400px) and (max-width: 700px) {...}
height: (max-height、min-height)
实用于视觉和触觉媒体类型,不能指定负值
用法与 width
个性统一。
兴许你会看到 device-width
和device-height
这样的媒体个性被应用,这两者更多的是示意设施的物理的宽高,规范文档中指出,倡议应用 width
或者 height
去做媒体没查问,实现更好的成果。
orientation (portrait(纵向)、landscape(横向))
实用于位图媒体类型,示意设施的横屏、竖屏
若 height
媒体个性的值大于 width
媒体个性的值,则 orientation
媒体个性为 portrait
,否则orientation
为landscape
。
<!-- 竖屏设施 -->
@media all and (orientation:portrait) {...}
<!-- 横屏设施 -->
@media all and (orientation:landscape) {...}
aspect-ratio
设施宽高比,定义为width
与height
的比例。
<!-- 示意 16/ 9 设施屏幕 -->
@media screen and (aspect-ratio: 16/9) {...}
any-hover any-pointer
十分弱小的性能,能够间接判断是否是触摸设施。
比方 any-hover
判断设施是否反对鼠标通过行为。
any-hover
none
: 没有什么输出安装能够实现 hover 悬停,即没有鼠标输出设施
hover
: 一个或多个输出安装能够触发元素的 hover 悬停交互,即反对鼠标设施
实用场景:在挪动端和 PC 端通用一个按钮,须要给按钮悬停成果,这是 PC 的 hover 就不适宜挪动端了,就能够借助 any-hover
来为挪动端做独自的成果优化体验。
button {background-color: #fff;}
button:active {background-color: #f0f0f0;}
/* 兼容 PC 端:*/
@media (any-hover: hover) {
button:hover {background-color: #f5f5f5;}
}
any-pointer
none
: 没有可点击的设施
coarse
: 至多一个设施的点击,然而点击不精确,例如手机挪动端。
fine
: 精准点击,常指带鼠标的 PC 浏览器。
当咱们晓得一个设施点击是否准确还是不准确之后,咱们就能进行相应的体验降级和改良。比方说一个单选框或者复选框,在 PC 端鼠标点击还是很好操作的,然而在挪动端,就须要做优化解决,针对挪动端,让复选区域、点击区域变大,从而达到优化用户体验的成果。
两者在浏览器兼容性
目前来说,除了 IE 浏览器不兼容,两者在其余浏览器上都可能应用。
写在最初
媒体查问的性能远远不止这些,最经典的场景就是对于非凡设施的兼容:iphoneX 的平安区域适配。媒体查问在 web 上为晋升用户体验、交互体验无足轻重,只有充沛学习它,一直摸索与尝试,能力更完满地适配。
参考
https://www.w3.org/TR/2020/WD…
https://www.w3.org/TR/2020/CR…