移动端rem自适应方案
假设设计妹妹给我们的设计稿尺寸为750 * 1340。结合网易、淘宝移动端首页html元素上的font-size属性,html5设计稿尺寸以及前端与设计之间协作流程一般分为下面两种。
一、网易做法
引入:页面开头处引入下面这段代码,用于动态计算font-size
使用:
未引入前
引入后:除以100并将px换成rem
换算的依据:
二、淘宝做法
引入:页面开头处引入下面这段代码,用于动态计算font-size,或者单独放入一个文件,引入文件也可以
使用:
未引入前
引入后
换算依据:
这边是用的less,如果您没有用less,就需要手动计算,当然也可以转化为px : rem = 100 : 1。如果想转化为px : rem = 100 : 1,可以修改上面的refreshRem函数:
使用:
未引入前
引入后:除以100并将px换成rem
换算依据就是上面修改的代码:
希望对需要的朋友有所帮助!
觉得本文对你有帮助?请分享给更多人
关注「前端大学」,提升前端技能
领取专属 10元无门槛券
私享最新 技术干货