CSS样式之响应式布局（媒体查询）

1.媒体查询

媒体查询（Media queries）

1.移动设备的快速普及完全颠覆了Web设计领域。 用户不再仅在传统桌面系统上查看Web内容，他们越来越多地使用具有各种尺寸的智能电话、平板电脑和其他设备。
2.Web设计人员的挑战是确保他们的网站不仅在大屏幕上看起来不错，在小型的电话以及介于它们之间的各种设备上看起来也不错。（说白了就是不同大小显示器web适配问题。CSS2中也有媒体查询，CSS3在此基础更加丰满）
 

1.1语法规范

1.用@media开通 注意@符号

2.screen表示所有的电子设备的屏幕

3.关键字（and）

4.必须有小括号包含

1.2 媒体特性

2.移动端

2.1 标准视口（理想视口）

 2.2 移动端单位

 em相对于父元素的大小

rem相对于根元素html的大小 

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

推荐使用rem作为单位或者em作为移动端的单位 来兼容不同的手机

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

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

比如：设计稿的宽度是200px，应该换算成多少rem? 

           200px除以根元素的10px=20rem