Fork me on GitHub

谈谈rem单位

frontend/css/rem/banner

前端开发中,移动端的开发可以说是举足轻重了,可是又面临着不同设备尺寸和分辨率的尴尬点。今天[2018-09-16]台风山竹登陆广东,来势汹汹,外出是不可能的了,那就宅着写写这篇小文章吧…

超长的前奏

说到移动端的响应布局,你也许会想到:

1. 使用CSS3媒体查询的方法

1
2
3
4
5
6
7
8
body {
background: yellow;
}
@media screen and (max-width: 400px) {
body {
background: red;
}
}

frontend/css/rem/media_demo

嗯,这种的编写样式工作量超级大,因为要对图片和文字等资源针对不同的尺寸进行设置。一种凉凉的感觉从心底飘过~~~

2. 直接使用百分比

这种方法比较适合移动端上,页面图片铺满宽度屏幕的运营推广活动的情况。因为在设计的时候会有一个750px的宽等等设计规范,能够很好的适配到不同手机啦。然后主要工作就是切图了…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#percent{
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#percent .item{
flex: 1;
}
#percent .item img{
display: block;
width: 100%;
height: auto;
}

frontend/css/rem/percent_demo

这种切图比较费力,如果认真看上面的gif图的话会发现是三张同等宽高的图片,在chrome上的调试器上看是有白条的,不过不影响。因为在真机上是不存在的。如果不是切图宽度等分的情况下,那就不建议这种百分比的适配方法了。

3. 固定宽度

这种方法比较适合PC端开发,在移动端是必须不能才去的。因为移动端的宽度足够,能够带来足够好的体验,并且最重要的一点是其像素比是1啊。在缩放的时候不会带来内容变形的体验。如果到移动端上面,那就呵呵了~

1
2
3
4
5
6
7
8
#container{
width: 680px;
background: yellow;
margin: 0 auto;
}
h1{
text-align: center;
}

frontend/css/rem/fixed_width_demo

4. 使用viewport

移动设备上的viewport是设备屏幕上用来显示网页的那部分区域,再具体一点就是浏览器上用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域大,也可能比浏览器的可视区域小。

这得要在网页的head标签上面设置meta,比如:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

嗯,这个知识点还是一丢丢的,详细的内容参考菜鸟教程:响应式 Web 设计 - Viewport。 本博文的重点不是这个~

是的,我们可以使用REM来进行适配啊:可以说是目前最强的移动端适配方案…

frontend/talk-about-gobang-game/qiaoba

rem是什么

rem和em单位一样,都是一个相对单位,不同的是em是相对于父元素的font-size进行计算,rem是相对于根元素htmlfont-size进行计算的,这样一来rem就完美的绕开了复杂的层级关系,实现了类似em单位的功能。默认情况下,浏览器给的字体大小是16px,按照转化关系16px = 1rem

咦,都是固定了根元素是默认16px了,如何设备不同的移动设备呢?

问题提出也是答案所在,我们动态改变根元素html的字体默认大小不就行了嘛!见下:

rem自适应处理方案

使用rem布局的时候,为了兼容不同的分辨率,我们应该要动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果。

嗯,下面就是动态改变根字体的大小了,采取的当然是javascript来进行控制啦,不然怎么知道像素比哦。

首先获取像素比【像素比=物理像素/逻辑像素】通过devicePixelRatio,其兼容性在ie上要在11及11+,兼容性良好。罢了,不讨论IE浏览器了,看者慎用IE

1
2
3
(function(){
var devicePixelRatio = window.devicePixelRatio || 1;
})();

嗯,在移动端上面适配,rem和viewport搭配效果更佳哦!完整代码片段如下:

1
2
3
<head>
<meta name="viewport" />
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function(){
var fontSizeMatchDeviceWidth = function(){
var deviceWidth = document.documentElement.clientWidth || window.screen.width || 320,
devicePixelRatio = window.devicePixelRatio || 1,
fontSize = (Math.ceil(deviceWidth * 16 / 320)),
scale = 1 / devicePixelRatio; // 默认的缩放

document.documentElement.style.fontSize = fontSize + 'px';
document.querySelector('meta[name="viewport"]').setAttribute('content','width=device-width,initial-scale='+'scale'+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no,viewport-fit=cover'); // 增加viewport-fit=cover适配iphone x
};

(function(){
var ua = navigator.userAgent;
if(/android/i.test(ua) || /ipad|itouch|iphone/i.test(ua)|| /tianqi/i.test(ua)){
fontSizeMatchDeviceWidth();
} else { // pc端优雅降级
document.documentElement.style.fontSize = '24px';
}
})();
})();

在上面的基础上,添加点点样式,完整的一个demo走一下:

1
2
3
4
5
6
7
#container{
background: yellow;
margin: 0 auto;
}
h1{
text-align: center;
}

frontend/css/rem/rem_demo

如有纰漏,欢迎看到的各位小哥哥小姐姐指正 @~@! 更多内容请前往我的github

frontend/css/rem/qiaoba2

<-- 本文已结束  感谢您阅读 -->
客官,且步,赏一个呗 (@ ~ @)