移动端H5适配方案（淘宝lib-flexible）

移动端H5适配方案（淘宝lib-flexible）

坏小子

第一个和最后一个敌人，都是自己！

7 人赞同了该文章

lib-flexible地址：amfe/lib-flexible

原理：

html根节点font-size：素尺寸的计算：元素的尺寸该如何计算，比如说宽度750px的设计稿上某一个元素的宽为150px，换算成rem应该怎么算呢？

设计稿内部元素宽度 = 设计稿宽度/设计稿对应的html的font-size。假如设计稿是750的，所以html的font-size就是750/10 = 75px，如果设计稿内某个元素是150px的宽，换算成rem就是150 / 75 = 2rem，设计稿750px得出宽度为：10rem也就是页面宽度为100%

项目中使用：

index.html 中插入 mata

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, minimal-ui, viewport-fit=cover,user-scalable=no">

引用lib-flexible，我是引入在index.html中的,根据项目需求也可引入npm包

<script src="lib-flexible.min.js" type="text/javascript" charset="utf-8"></script>

准备就绪，知道换算方法实际开发中如何操作呢，难到我们要准备个计算器来计算rem吗？我用的开发工具是vscode,以vscode 为例：

安装扩展cssrem

“设置”中找到cssrem，设置root font-size (设计稿/10)

设置rootsize，设计稿/10

css文件中使用，自动转换rem

编写样式自动换算

完成！

lib-flexible原文：由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。推荐vw-laylout相关链接：

如何在Vue项目中使用vw实现移动端适配_vw, Layout, 布局, Vue, mobile, 会员专栏 教程_w3cplus​www.w3cplus.com/mobile/vw-layout-in-vue.html正在上传…重新上传取消https://link.zhihu.com/?target=https%3A//www.w3cplus.com/mobile/vw-layout-in-vue.html

vw-layout​www.npmjs.com/package/vw-layout正在上传…重新上传取消https://link.zhihu.com/?target=https%3A//www.npmjs.com/package/vw-layout

编辑于 2020-05-28 10:44