CSS媒体查询及移动端兼容

1.媒体查询

通过媒体查询（Media queries），您可以根据各种设备特征和参数的值或者是否存在来调整您的网站或应用。

它们是响应式设计 (en-US)的关键组成部分。 例如，媒体查询可以缩小小型设备上的字体大小，在纵向模式下查看页面时增加段落之间的填充，或者增加触摸屏上按钮的大小。

在 CSS 中，使用 @media at-rule 根据媒体查询的结果有条件地应用样式表的一部分。 使用 @import 有条件地应用整个样式表。

许多媒体功能都是范围功能，这意味着可以在它们前面加上“最小”或“最大”来表示“最小条件”或“最大条件”约束。 例如，仅当您的浏览器的viewport宽度等于或小于12450px时，此CSS才会应用样式：

@media (max-width: 12450px) { ... }

媒体类型

媒体类型（Media types）描述设备的一般类别。除非使用 not 或 only 逻辑操作符，媒体类型是可选的，并且会（隐式地）应用 all 类型。

all

适用于所有设备。

print

适用于在打印预览模式下在屏幕上查看的分页材料和文档。 （有关特定于这些格式的格式问题的信息，请参阅分页媒体。）

screen

主要用于屏幕。

speech

主要用于语音合成器。

条件之间用and连接切and前后加空格

2.移动端兼容

 使用物理单位在不同宽度和不同分辨率的手机上会有一定的差异

我们在这里推荐使用rem和em作业移动端的单位来兼容不同的手机

em是相对于父级单位的大小来显示的，不够固定 所以一般使用rem作为移动端的主流单位 因为rem是相对于根元素html的大小来显示的 html的大小相对固定

100px就代表.1rem .1rem(设计稿中的实际大小)=100px*根元素的.1rem

设计稿中的宽度是200px 应该换算为20rem

设计稿设备宽度是750px

目前谷歌浏览器的html默认的font-size的大小是16px

但是不能保证其他浏览器的根元素的字体大小都是一致的

所以我们推荐手动设置根元素的大小