前端4种常见布局

流式布局：就是百分比布局，非固定像素，内容向两侧填充，理解成流动的布局，称为流式布局。 （圣杯布局）

视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。

承载关系：浏览器---->viewport---->网页

适配要求：

1. 网页宽度必须和浏览器保持一致

2. 默认显示的缩放比例和PC端保持（缩放比例1.0）

3. 不容许用户自行缩放网页 （ 知足这些要求达到了适配，国际上通用的适配方案，标准的移动端适配方案。）

适配设置： 若是任何设置都没有，默认走的就是viewport的默认设置 去设置新的viewport设置,达到适配要求。

设置视口的标签 在head里面而且应该紧接着编码设置 viewport的功能：

1. width 能够设置宽度 (device-width 当前设备的宽度)

2. height 能够设置高度

3. initial-scale 能够设置默认的缩放比例

4. user-scalable 能够设置是否容许用户自行缩放

5. maximum-scale 能够设置最大缩放比例

6. minimum-scale 能够设置最小缩放比例 在 content="" 使用如下参数

1. width=device-width 宽度一致比例是1.0

2. initial-scale=1.0 宽度一致比例是1.0

3. user-scalable=no 不容许用户自行缩放 （yes，no 1,0）

标准适配方案：

 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

2.媒体查询 使用媒体查询能针对不一样屏幕区间设置不一样的布局和样式。

响应式容器：

　　1. 在超小屏设备的时候 768px如下 当前容器的宽度100%

　　 2. 在小屏设备的时候 768px-992px 当前容器的宽度750px

　　3. 在中屏设备的时候 992px-1200px 当前容器的宽度970px

　　4. 在大屏设备的时候 1200px以上 当前容器的宽度1170px

3.rem布局（rem的大小是基于html元素的字体大小） 经过控制html上的字体大小去控制页面上全部已rem为单位的基准值控制尺寸。

3.1 把页面上px单位转换成rem单位

3.2 页面制做的时候 psd 上的量取的px转成rem使用

3.3 怎么换算？？？预设一个基准值 方便计算 100px

3.4 适配的时候设置基准值 320px 50px 怎么算：（640px 100px ===320px 50px）

3.5 换算公式：当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度

3.6 怎么去改变 （js换算，媒体查询推荐） 在浏览器端使用less

　　1.less没法在浏览器端直接使用

　　2.浏览器不识别

　　 3.必须解析成css代码

　　 4.经过less解析插件（javascript）

　　 5.引入less文件须要加上 type="text/less"

　　 6.less.watch(); 无刷新预览样式

　　 7.以http形式打开网页预览

 

总结：

四种布局。

　　1.伸缩布局 flex

　　2.流式布局 百分比

　　3.响应布局 媒体查询 （超小屏设备的时候：流式布局） 共同点：元素只能作宽度的适配（排除图片）适配方案rem：宽度和高度都能作到适配（等比缩放）

　　4.rem布局