移动端布局解决方案（ViewPort，流式布局，REM布局，如何设置rem，响应式布局，媒体查询）

一.移动端：尺寸差异比较大，但是浏览器一般版本较高 -- 更重尺寸

PPI：每英寸像素数

DPR：Device Pixel Ratio --- 设备像素比，已知，由厂商设置，一般来说为2，也有3和1.5

设备的物理分辨率：屏幕分辨率

设备的逻辑分辨率：Device-width --- 移动端开发

device-wdith = 物理分辨率/(DPR*Scale) 一般来说,Scale设置为1

二，ViewPort（视口 ）

1.出现原因：PC网页尺寸远远大于移动端的屏幕尺寸，如果缩小挤压则会打乱原有的布局，这个时候就引入了viewport，viewport大于移动端屏幕尺寸，可以将PC端网页放入进来，然后通过平移，缩放查看网页内容

2.不同的设备都会设置浏览器下默认的viewport尺寸

3.可以通过<meta>标签控制viewport

<meta name="viewport" content="name=val,name2=val2">
name就是viewport的属性，val就是该属性对应的值
常用属性：width：设置视口宽度，是一个正整数，一般设置为device-width
        initial-scale：设置初始缩放比例，是一个数字，一般设置为1
        minimum-scale：设置允许用户缩放的最小缩放值
        maximum-scale：设置允许用户缩放的最大缩放值
        user-scalable：设置是否允许用户缩放，值为yes/no
        height：设置视口高度，一般不用

4.移动端布局必须设置viewport

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

三，移动端布局解决方案

流式布局

1.百分比布局

2.原理：将固定的宽高设置为百分比或vw

REM布局

1.rem：相对长度单位 -- 根元素的font-size大小

2.默认：1rem = 16px

3.原理：将布局时的固定单位，替换成rem

如何设置rem：

1.假设1rem = 100px(1rem表示的是设计稿尺寸(物理分辨率)中的100px)，在不同的设备下换算公式为：

font-size = device-width / 设计稿宽度 * 100

2.通过calc()计算

:root{font-size:calc(100vw / 750 * 100)}

3.通过JS设置（略）

4.通过媒体查询设置（略）

响应式布局

原理：通过媒体查询给不同移动端尺寸设置不同的样式

媒体查询：

@media [[not|only] mediatype] [and (mediafeature and|or|not mediafeature)] {
  CSS-Code;
}
mediatype:all：所有的设备
          print：打印机和打印预览
          screen：电脑，手机，平板屏幕
          speech：屏幕阅读器
mediafeature：min-width：定义输出设备中的页面最小可见区域宽度
             max-width：定义输出设备中的页面最大可见区域宽度

弹性盒子布局（响应式布局）

长度单位

1.px：像素 -- 固定单位

2.%：百分比 -- 相对于父级或本身的宽高

3.em：相对长度单位 -- 相对于父元素的font-size大小

4.rem：相对于根元素(html)的font-size大小

5.vw：viewport的1%宽度

6.vh：viewport的1%高度

7.vmin：viewport中较小尺寸的1%

8.vmax：viewport中较大尺寸的1%