前端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布局