CSS3媒体查询

来源：互联网发布：swot矩阵分析图绘制编辑：程序博客网时间：2024/05/29 06:28

经验不足的前端人员在头几次面对一大堆兼容性问题时往往手足无措，有时候一个样式的兼容性问题我们不需要去这种写一个能匹配所有设备的CSS样式，而是可以完全针对不同特性的设备编写不同的CSS样式。

使用Media Query可以编写两套css样式来兼容不同设备。通过识别设备的屏幕长宽范围、设备方向等属性来确定不同的css样式。例如我们可以假设以下样式可以特定针对iphone4手机:

@media only screen

and (min-device-width: 320px)

and (max-device-width: 480px)

and (-webkit-device-pixel-ratio: 2)

and (device-aspect-ratio: 2/3) {

//special css stylesheet

}

在大括号内编写特定于iphone4的样式即可（使用Media Query的同时，外部样式同样使用，内部重叠样式将覆盖）。更多常见媒体查询用法：https://segmentfault.com/a/1190000002711737

常用设备属性查询地址：http://mydevice.io/devices/?utm_source=caibaojian.com

0 0