📱 学习 - 移动端适配心得

SLYLXDYMJ

字数：712 字

时长：2 分钟

本文主要讨论移动端开发的页面适配技巧

为何要适配？

各个手机的屏幕大小不同，若用 px 单位，则会在各个屏幕下显示相同尺寸
往往会偏大或偏小，效果差劲，原因是因为没有等比例缩放(没有用相对单位)
相对单位有 vw，em，rem，% 等
保证其在不同屏幕尺寸下，按照一定的尺寸标准，等比例缩放，实现自动适配

适配方法

原理都是根据屏幕实际宽度来计算

1. vw 适配方案

   ★★★★★
   由于 1vw = 屏幕总宽的百分之一，是最适合用来适配的单位
   兼容性不如 rem 单位

2. rem 适配方案

   ★★★★
   通过改变在 html 标签改变 font-size 属性，实现等比例缩放
   兼容性很好，是比较老的技术

开发体验

不论是 vw 还是 rem 自己算是很麻烦的… 0.2497rem … 2.645514vw …
最好的开发体验是设计图多少就在项目中写多少
然后通过预处理语言自动转化为 vw 或 rem 单位

解决方案

vw

在项目中写设计图上的 px 单位
通过 postcss-px-to-viewport 预处理转为 vw单位
通过 viewport-units-buggyfill 在客户端照顾兼容性

• 预处理：postcss-px-to-viewport

  https://github.com/evrone/postcss-px-to-viewport
  postcss 的插件，只要写上参考设计图的宽度，自动将 px 单位转为 vw 单位

• 客户端：viewport-units-buggyfill

  https://github.com/rodneyrehm/viewport-units-buggyfill
  这是个 vw 单位的 polyfill，建议配合 postcss-px-to-viewport 使用
  作用是分析加载的 css 文件，然后将 vw 单位在转为 px，放到 head 中
  建议非必要不要使用，…有时会出现写莫名其妙的 bug

rem

在项目中写设计图上的 px 单位
通过 postcss-px2rem，预处理转为 rem 单位
通过 hotcss，在客户端改变 html font-size

• 预处理：postcss-px2rem

  https://www.npmjs.com/package/postcss-px2rem
  基于 postcss 的插件，设置好 1rem = ？px 后，自动转换 px 为 rem 单位

• 客户端：hotcss

  https://github.com/imochen/hotcss
  rem 解决方案，按照 640 设计图动态设置 html 的 font-size 属性
  并通过设置 viewport scale，解决移动端 1px 难题
  可以设置屏幕最大尺寸，友好的适配桌面端
  建议配合 postcss-px2rem 使用

// hotcss 是已 640 设计图为标准的
// 1rem = 40px - 在屏幕为 640
// 1rem = 20px - 在屏幕为 320
// 1rem = 40px - 在屏幕为 320，但是 viewport scale = 0.5 的情况下，相当于 640

// 若设计图尺寸不是 640
// 则需要自己换算
// 算法为： innerWidth * 20 / 320
// innerWidth 为屏幕实际尺寸

// 例如：
//   750 设计图
//   算法为：750 / 2 * 20 / 320
//   1rem = 46.875px  - 在屏幕为 750
//   1rem = 23.4375px - 在屏幕为 375
//   1rem = 46.875px  - 在屏幕为 375，但是 viewport scale = 0.5 的情况下，相当于 750