PC/移动端布局方式

1.静态布局：

布局特点：宽高固定

2.自适应布局：

• 布局特点：不同分辨率下，页面元素位置变化，大小不变
• 实现方法:针对不同分辨率创建对应的样式表，使用 @media 媒体查询给不同尺寸的设备切换不同的样式
• 缺点：IE8及以下不支持媒体查询；只能兼容主流分辨率

3.流式布局（百分比布局）:

• 布局特点：不同的分辨率下显示相同的排版；高度固定，宽度自适应
• 实现方法:网页中主要区域的尺寸使用百分比；
• 缺点：大屏幕上元素被拉长，但是文字，高度还是固定大小，不协调
• 经典流式布局：左侧固定，右侧自适应；两侧固定，中间自适应

4.弹性布局（rem/em布局）：

• 布局特点：页面元素宽度，高度，字体大小会跟着屏幕大小缩放
• 实现方法:使用js监听当前屏幕大小，设置html的字体大小
• 缺点：IE678不兼容；需要计算；

5.响应式布局：

• 布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变，响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表等等）都能显示出令人满意的效果
• 实现方法：媒体查询+流式布局
• 优点：适应pc和移动端
• 缺点：要匹配足够多的屏幕大小，工作量大，设计也需要多个版本

6.响应式布局和流式布局的区别：

• 响应式是用于解决不用设备之间不同分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)
• 流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)，但由于未针对不同屏幕做区分，效果在部分屏幕上可能不好。

7.响应式和弹性布的区别：

• 响应式布局：改变浏览器宽度，布局会随之变化，不是一成不变的（例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单）也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果
• rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。

8.常用布局单位

vw,vh：

• 相对于视口；PC端指的是浏览器的可视区域；
• 1vw等于视口宽度的1%,1vh等于视口宽度的1%（1920*1080的屏幕，1vw = 19.2px,1vh = 10.8px）
• IE8以及IE8以下不兼容

rem:

• 相对于根元素html字体大小；谷歌浏览器默认字体大小是16px;
• IE678不兼容

em:

• 相对于父元素的字体大小；默认1em=16px;
• 参照物不稳定

Last

移动端的布局以前都是用rem相对多一些，从之前的remjs到px2rem等webpack插件都是用的rem；
PC端有时候也用rem，但更多的是用媒体查询，但媒体查询会比较麻烦，代码量大。
所以最后推荐布局

• 移动端推荐vw+vh
• PC端推荐vw+vh+百分比+minWidth+minHeight
  vw-vh插件地址