4- 移动端 REM+JS 动态适配页面

1.百分比+固定高度布局方案

  • 固定屏幕为理想视口宽度
  • 少许的媒体查询设置字体
  • 水平百分比布局
  • 水平方向部分也可以使用弹性布局

2.Rem解决方案

  • Rem的大小取值:根据页面的dpr动态改变
  • Rem的取值: 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度(client_width)
  • chrome浏览器字体小于12px(会被重置为12px)

3.固定设计稿的宽度开发+根据设备动态适配缩放

  • 开发直接按照设计稿编写固定尺寸元素
  • 页面加载完成后用js动态根据dpr改变页面的缩放值
  • 推荐使用: flexible方案

重点方式:

1.REM+JS 动态适配页面




   
   
   
   REM+JS动态适配尺寸
   


   
JS响应式宽度.jpg

你可能感兴趣的:(4- 移动端 REM+JS 动态适配页面)