首页
学习
活动
专区
工具
TVP
发布

移动端页面自适应解决方案:rem 布局篇

移动端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

换算依据就是上面修改的代码:

希望对需要的朋友有所帮助!

觉得本文对你有帮助?请分享给更多人

关注「前端大学」,提升前端技能

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171224A0GG3J00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券