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;

　　　　参照物不稳定