关于Web App Rem 的使用

原创 15038098692 随笔 移动端 515阅读 2017-05-04 09:50:10 举报

1.拿到设计稿后怎么做?

拿到设计稿后首先确认设计稿的宽度,是320px、375px、640px还是其它宽度。

图1

这里我们假设设计稿为320px。

2.使用如下 js

document.documentElement.style.fontSize = $(document.documentElement).width()/3.2 + 'px';
$(window).on('resize', function() {
document.documentElement.style.fontSize = $(document.documentElement).width()/3.2 + 'px';
})

通过这个 js 设置 html 元素的 font-size 值。

我们设计稿是 320px 宽度的,就在 js 中除以 3.2,是 375px 宽度就除以 3.75,使 html 的 font-size 值为 100px。

PS: 设置为100px是为了方便我们计算rem值。

当屏幕宽度变化时,js 会动态改变 html 的 font-size值。

图2

图2

3.编写css样式

使用js后就可以进行css样式的编写了。rem是基于根元素html的font-size值的,所以,这时候将所有的px单位转化为rem单位来写就可以了。

图3

4.完成

这样就简单高效的实现了 rem 等比适配所有分辨率。

附上原本链接:原文链接

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复