[A] 移动端之viewpoint视口
在移动端viewpoint视口就是浏览器显示页面内容的屏幕区域。 在viewpoint中有两种视口，分别为visual viewpoint(可视视口)和layout viewpoint(布局视口)。
viewpoint固定大小跟屏幕大小相同，在上层；而layout viewpoint在下层。 layout viewpoint可改变大小，其默认像素为980px，可通过document.documentElement.clientWidth获取。
现代网页需要将layout viewpoint设置成与visual viewpoint等同大小，方便网页制作。
1. viewpoint设置
通过<meta>标签进行设置，name属性指定viewpoint值，content属性进行视口配置。
如：<meta name="viewport" content="width=device-width, initial-scale=1.0 minimum-scale=0.5">
值 含义
width 设置layout viewpoint的宽度特定值，device-width表示设备宽
height 设置layout viewpoint的高度特定值，一般不进行设置
initial-scale 设置页面的初始缩放
minimum-scale 设置页面的最小缩放
maximum-scale 设置页面的最大缩放
user-scalable 设置页面能否进行缩放
2. 移动端适配布局
a. 百分比布局，也叫流式布局。代表网站：优酷、百度、天猫、腾讯
b. 等比缩放布局，也叫rem布局。代表网站：网易、爱奇艺、淘宝、美团。
3. 移动端布局练习
4. rem布局
单位：
em：是一个相对单位，1em等于当前元素或父元素的font-size值。
rem：是一个相对单位，1rem等于根元素的font-size值。
vw/vh：把屏幕分成100份，1vw等于屏幕宽的1%，1vh等于屏幕高的1%。
5. 动态设置font-size：
1. 通过JS
获取layout viewpoint值：document.documentElement.clientWidth
2. 通过vw
把屏幕分成100份，1vw等于屏幕宽的1%，1vh等于屏幕高的1%。
【注】要给body重置一下font-size：16px，即保证根元素的字体免得受到影响。
[B] 响应式布局
利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。
1. 媒体类型：
值 含义
all 用于所有设备
print 同于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等
speech 应用于屏幕阅读器等发声设备
2. 相关语法：
and、not 与、或
min-width、max-width 最小宽、最大宽
orientation：portrait/landscape 纵屏、横屏
<link>
3. 语法：
@media 媒体类型 and/or (条件){
样式1;
样式2;
......
}
说明：
a. 媒体类型一般为all；
b. 条件为min-width，max-width的设置
c. 样式1，样式2为满足相应时展示的样式。
【注】当样式冲突时，以后写的为准
4. link的用法：引入外部css文件做响应式布局
如：<link rel="stylesheet" href="base.css" media="all and (min-width+400px)">
5. 常见修改样式
display
float
width
【注】响应时代码要写到适配样式的下面
6. 响应式的两种基本操作模式
a. 通过响应式布局在不同的屏幕条件下给同一个id或者class编写样式
b. 通过响应式布局在不同的屏幕条件下分别编写不同的样式，通过调用不同的名字来换用不同的样式