响应式页面布局、移动端布局

实现页面响应式布局需要认真了解以下两点：

• 弹性盒模型
• 媒体查询

1、弹性盒模型介绍：
弹性盒布局模型是css3规范中提出的一种新的布局方式。
目前：提供一种更加高效的方式来对容器中的条目进行布局、对其和分配空间。
优势：这种布局模型已被主流浏览器所支持，可以在web应用开发中使用。

注意需设置盒子为弹性的：display：flex;

flex相关的属性：

• 设置主轴的方向：
  flex-direction：row（水平方向）
  flex-direction：column（垂直方向）
• 设置主轴的对齐方式：
  justify-content：flex-start（默认，顶端对齐）
  justify-content：flex-end（末段对齐）
  justify-content：center（居中对齐）
  justify-content：space-between（两端对齐，中间自动分配）
  justify-content：space-around（自动分配距离）

2、媒体查询
（1）媒体查询：根据设备显示的特性（如视口宽度、屏幕比例、设备方向：纵向还是横向）为其设定的css样式；
（2）作用：可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果，是响应式布局实现的主要方式；
（3）语法：

@media mediatype and|not|only（media feature）{
  css-code；
}

（4）注意：

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

（4.1） mediatype 查询类型
将不同的终端设备划分为不同的类型，称为媒体类型
all：用于所有设备
print：用于打印机和打印预览
screen：用于电脑屏幕、平板电脑、智能手机等

（4.2）关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件

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

（4.3）媒体特性
每种媒体类型都具体各有不同的特性，根据不同的媒体类型的媒体特性设置不同的展示风格，暂且了解三个，注意要用小括号包含

当然关于rem可以看看这个博客的内容 html和rem的适配

再说说实现移动端布局方式有哪些？

• 100%布局，又叫弹性布局（如之前的拉勾网）
• rem布局（等比例缩放，如网易）
• vw布局

1920px X 1080px——物理像素
980px ——逻辑像素

比如iPhone 6 ：
750px 物理
375px 逻辑

分辨率有哪些：
安卓：480* 800、 480* 854 、540* 960 、720* 1280 、1080* 1920
iPhone：640* 960、 640* 1136、 1242* 2208、 1334* 750

移动端布局使用的单位有哪些？
em、rem、%、vw、vh
上面都是相对单位，可以根据viewport的变化，进行实时的改变

vw单位 1vw = 屏幕宽度 / 100 = 1%的屏幕宽度
vh单位 1vh=屏幕高度 / 100 = 1%的屏幕高度

下面来看通过vw实现移动端页面

注意：移动端开发是书写比例，实际像素 / 设计图的总宽度 = 比例

vw转换px：
设备的分辨率为640* 1136，逻辑像素为320* 568 ，1 vw = 3.2px font-size：100px；
转换为vw 的font-size ：31.25vw；所以 1rem = 31.25vw

最后对比看看这个 rem的博客