移动端rem布局方案

原创 知乎其微 教程 JavaScript 739阅读 2018-05-04 14:42:44 举报

rem是什么?

rem (font size of the root element) 是相对根元素 <html> 的字体大小变化而变化的css单位,实现强大的屏幕适配布局是它的优势;
  • 所以不同屏幕大小的终端,它的根元素 < html> 的字体大小是需要相应变化的,一般由 JS 控制或者 media query 控制;
  • 本文不考虑 media query 方式,因为Android太多分辨率了,嗯~ 不说了...
  • 既然 rem 是一个css单位,编写样式的时肯定得将设计图中的px转为rem,怎么转换取决于你的脚本怎么控制

需要解决的问题

  • 如何根据不同大小的屏幕修改根元素 < html> 的字体大小?
  • 写样式时,如何将设计MM给的图轻松转换为css对应的rem?

解决方案

使用方法

在所有资源前加载上段JS代码或者JS文件
在入口页面的 head 标签内引入(不建议在入口文件 main.js 中引入);

视觉稿中的px如何转换成rem;
rem计算方式:设计图尺寸px / 100 = 实际rem 【例: 100px = 1rem,32px = 0.32rem】;
特别注意:是不需要再除以2的!!!

无论设计图什么尺寸,算法一致。但需修改js 中 docWidth 变量为设计图宽度;默认设计图文档宽度为750px;

题外话

如果觉得以上js代码过多(或者有些你用不到的),可以采用更简洁的写法,如下:

为什么是750px?

对于手机屏幕来说,750px的页面宽度是一个安全的最大宽度,保证了移动端页面两边不会留白。注意这里的px是css逻辑像素,与设备的物理像素是有区别的。如iPhone 5使用的是Retina视网膜屏幕,使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel,所以设备像素数为750 x 1136px,而它的CSS逻辑像素数为375 x 568px。如果要切移动端页面,你可以先把效果图宽度等比例缩放到750px,很好用。
如果你把html的font-size设为20px,前面说过,rem就是html的字体大小,那么1rem = 20px。

那要是宽55px,高37px呢?然后经过换算,,设置如下 ↓

如果我们一开始把html的font-size设为100px呢?此时1rem = 100px

(有人问,为什么不一开始把html的font-size设为1px呢,这样换算起来也简单,答:浏览器一般都有最小字体限制,比如谷歌浏览器,最小中文字体就是12px,所以实际上没有办法让1rem=1px。)

根据上面的js代码,如果页面宽度低于750px,那么页面中html的font-size也会按照(当前页面宽度/750)的比例变化。这样,页面中凡是应用了rem的作尺寸单位的元素都会随着页面变化而等比例缩放了!

评论 ( 3 )
最新评论
s362397473 2018-05-22 14:10:07 3F

我用scss里面直接写方法输入多少px作为参数返回一个rem就行了

ysjhnuitanfei 2018-05-14 13:01:02 2F

我现在用的是直接px,然后项目中的css最后会生成对应的rem,比如写了80px,最后css会输出0.8rem

1292150917a 2018-05-08 16:38:21 1F

文章不错 如果有用webpack的话 不妨尝试一下px2rem 自动转换 rem的 我用着感觉不错