移动端H5页面自适应使用方式（手淘H5）

版权声明：转载请声明出处 https://blog.csdn.net/weixin_40890907/article/details/82381834

要实现手机屏幕自适应布局（样式），可以使用手淘H5开发模式

1.在主页面index.html中引入js文件

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<script src="https://front-h5.oss-cn-hangzhou.aliyuncs.com/flexible.js"></script>

 或者

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

2. 使用vscode，安装px2rem插件，并设置根的font-size为75。（UI设计稿尺寸为750px）

 

3. 使用方式 ：在写样式时根据设计稿上的尺寸，例如：输入20px自动转换为对应的rem 

具体原理参考使用Flexible实现手淘H5页面的终端适配rem自适应布局-移动端自适应必备