H5手淘方案适配移动端

H5移动适配方案网上有很多,但是最好用的还是淘宝开源的Flexible库+Rem解决方案,这里暂且不说适配方案的思想和原理,这里仅作H5页面开发时的使用说明。以iPhone6设计稿为例,可以看到设计师标注的尺寸等。这些尺寸我们就可以以1:1的比例直接使用。


Flexible引入

// 可以看到meta[name='viewport']标签被注释掉了,这是因为它强制设置scale为1,font-size比例也会进行缩小,和设计稿上的尺寸有出入,加大前端计算量



  
  
  
  
  
  
  
  Document
  


  我在测试手淘方案


Rem转换

这里使用的vsCode开发工具,安装插件cssrem插件,这里以iPhone6为例,打开浏览器可以看到data-dpr为2和font-size为75px,所以这里设置Root Font Size为75即可,这样输入20px就会及时自动转换了。subline也有相应的转换插件。
image.png

你可能感兴趣的:(H5手淘方案适配移动端)