移动端常见布局及原理

1.固定布局 采用固定像素 原理：设置好视口，跟PC端写法一样 版心320px即可
缺点：界面左右两侧有空白 而且元素略小 用户体验差
2.流式布局 原理采用%替代固定的px 限制布局盒子的最大宽度和最小宽度
优点：实现自适应 缺点：只做宽度适配，高度会被拉伸
3.响应式布局 rem+js、媒体查询bootstrap
原理：设置根据标签html的字体大小，利用媒体查询 换算不同屏幕下对应的字体大小 利用相对单位人取代固定px 优点宽高字体代销都能自适应 显示效果好
rem布局
设置根标签HTML的字体大小，利用媒体查询换算不同的屏幕宽度下对应的字体大小，利用相对单位rem取代固定px 优点：盒子宽高大小都能自适应，可以达到自适应要求，
缺点：字体大小如果也设置rem单位的话会出现字体变化呈现线性的变大变小，其实字体的变化应该是非线性的取值，所以字体需要单独利用媒体查询

4.媒体查询布局 原理：利用媒体查询查询不同的屏幕宽度给每个不同设备都写一套样式文件
缺点：复杂 工作量大 后期难维护