移动端适配的解决方案
1. 常见的适配方案
- 百分比+固定高度布局方案
- 固定屏幕为理想视口宽度
- 少许的媒体查询设置字体
- 水平百分比布局
- 水平方向部分也可以使用弹性布局
- Rem解决方案
- Rem的大小取值:根据页面的dpr动态改变
- Rem的取值: 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度
- chrome浏览器字体小于12px(会被重置为12px)
- 固定设计稿的宽度开发+根据设备动态适配缩放
- 开发直接按照设计稿编写固定尺寸元素
- 页面加载完成后用js动态根据dpr改变页面的缩放值
- 推荐使用: flexible方案