移动web网页开发（下篇）——rem适配布局和响应式布局开发

一、rem适配布局 

1.rem基础

rem单位

rem单位是一个相对单位，是基于html的字体大小
 例如：根元素( html )设置font -size= 12px，非根元素设置width:2rem，则换成px表示就是24px。

与em的区别

•  em是根据父元素的字体大小
•  rem是根据html的字体大小

优点

• 可以通过修改html里面的文字大小来改变页面中元素的大小
• 可以整体控制  

2. 媒体查询（Media Query）

使用@media查询.可以针对不同的媒体类型定义不同的样式，@media可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

目前针对很多苹果手机、Android手机 .平板等设备都用得到多媒体查询

语法规范

@media mediatype and|not|only （media feature）{
           

}

•                 用@media开头，注意@符号
•                 mediatype  媒体类型
•                 关键字  and  not  only
•                 media feature  媒体特性     必须有小括号包含

媒体类型（mediatype）

1.             all                           用于所有设备
2.             print                       用于打印机和打印预览
3.             screen                   用于电脑屏幕，平板电脑，智能手机等

关键字

将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

1. and                         可以将多个媒体特性连接到一起，相当于“且”的意思
2. not                          排除某个媒体类型，相当于“非”的意思，可以省略
3. only                        指定某个特定的媒体类型，可以省略

媒体特性

每种媒体类型都具有各自不同的特性,根据不同媒体类型的媒体特性设置不同的展示风格。

1. width                                                        定义输出设备中页面可见区域的宽度
2. min-width                                                 定义输出设备页面最小可见区域宽度
3. max-width                                                定义输出设备中页面最大可见区域宽度

注意

•                     注意他们要加小括号包含
•                     从小到大写可以根据层叠性简化代码
•                     screen还有and必须带上不能省略
•