CSS媒体查询

媒体查询在移动端开发时，处理页面兼容性的一个有效的处理方式。一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。

媒体查询包含一个可选的媒体类型和媒体特性表达式(0或多个)最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。

今天分享一个在项目开发的时候踩到的坑点。

有些信息在移动端显示时，因为移动端屏幕大小都不一样，因此有必要去解决这些问题。最常用的是利用css媒体查询里面的屏幕的相关属性。

如页面在苹果5和苹果X显示存在问题时，利用媒体屏幕相关的属性可以写出一下的代码

@media screen and (min-width: 300px) {
/*屏幕宽度300到330px时的样式 */
.fontSizeB {
font-size: 18px;
padding-top: 11%;
}
}

@media screen and (min-width: 330px) {
/*屏幕宽度大于330时的样式*/
.fontSizeB {
font-size: 20px;
padding-top: 11%;
}
}

 

代码很简单，但是特别实用，可以解决很多样式兼容性的问题。

想了解更多的朋友可以去MDN官方文档（https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries）进行学习。