首页 > 前端日志 > HTML和CSS > 移动端屏幕适配方案,rem单位的使用
2018
06-09

移动端屏幕适配方案,rem单位的使用

我们在做移动端页面的时候,一个很关键的问题就是需要适应不同大小的屏幕,让每种机型上的布局看起来都尽量一样,这让新入行的小伙伴都非常头疼。目前针对移动端的布局,主要有这么几种方式

  • 固定高度,宽度百分比:这是初级前端做的事,这种方法只适合比较简单的布局,也是比较落后的布局,稍微复杂的页面就不适合了。
  • 媒体查询布局:现在比较主流的布局方案,Bootstrap 就是使用的媒体查询布局,能完成大部分项目的需求,但是编写过于复杂,现在也慢慢在陨落中。
  • flex+rem布局:现在的主流布局方案,不管在移动端还是在PC端,都表现良好,是目前最受欢迎的布局方式。这篇文章就跟大家聊聊怎么在移动端使用rem布局。

rem介绍

rem:font size of the root element,是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。

有点不好理解是不是?其实是这个意思,rem的大小长短,是不确定的,是跟根元素的font-size存在一定的比例关系。

好像更迷糊了?不要紧,再往下看。

 

新建一个网页,并写入如下代码:

<div class="test">
    <p class="hello">Hello jspang</p>
</div>

 

然后给html一个基本的样式:

.test{
    width:320px;
    height:160px;
    background-color: bisque;
    text-align: text;
}
.hello{
    color:red;
}

 

上边我们使用了还是传统的使用px作为单位,我们在移动端调试模式iphone5环境查看一下。会发现div的宽度是正好的,我们再查看一下字体,发现大小是16px。

我们现在可以把CSS中的px单位换成rem单位来进行测试。因为html根元素的字体大小一般默认是16px,那么换成rem单位,直接除以16就好。

.test{
    width:20rem;
    height:10rem;
    background-color: bisque;
    text-align: text;
}
.hello{
    color:red;
    font-size:1rem;
}

 

页面并没有什么变化,也就是说我们掌握了换算关系。为了更好的说明这点,我们可以试着给html根样式加入字体大小,比如换成font-size:32px;。这时页面和字体都扩大了一倍。但是我们现在还是不能实现适配,因为我们根元素的字体是固定的。

如果我们根元素的字体能跟屏幕适配起来,就可以完成布局的自动适配了,所以,我们要做的就是,使用js来控制根元素的字体

//得到手机屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
htmlDom.style.fontSize= htmlWidth/20 + 'px';

 

现在,20rem 就刚好等于手机屏幕的宽度了。

比如,如果你的手机屏幕是320px,那么20rem就等于320px;手机屏幕是720px,20rem就等于720px。

 

最后编辑:
作者:eatdao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。