移动端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相关链接:
编辑于 2020-05-28 10:44