可爱的rem

时间 2019-11-05

标签可爱 rem 繁體版

原文原文链接

前端开发中，移动端的开发能够说是举足轻重了，但是又面临着不一样设备尺寸和分辨率的尴尬点。今天[2018-09-16]台风山竹登录广东，来势汹汹，外出是不可能的了，那就宅着写写这篇小文章吧...原文请戳这里-谈谈rem单位javascript

超长的前奏

说到移动端的响应布局，你也许会想到：css

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

body {
	background: yellow;
}
@media screen and (max-width: 400px) {
	body {
		background: red;
	}
}
复制代码

嗯，这种的样式的工做量超级大，由于要对图片和文字等资源针对不一样的尺寸进行设置。一种凉凉的感受从心底飘过～～～前端

2. 直接使用百分比java

这种方法比较适合移动端上，页面图片铺满宽度屏幕的运营推广活动的状况。由于在设计的时候会有一个750px的宽等等设计规范，可以很好的适配到不一样手机啦。而后工做就是切图了...android

#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;
}
复制代码

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

3. 固定宽度github

这种方法比较适合PC端开发，在移动端是必须不能才去的。由于移动端的宽度足够，可以带来足够好的体验，而且最重要的一点是其像素比是1啊。在缩放的时候不会带来内容变形的体验。若是到移动端上面，那就呵呵了～chrome

#container{
	width: 680px;
	background: yellow;
	margin: 0 auto;
}
h1{
	text-align: center;
}
复制代码

4. 使用viewport浏览器

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

这得要在网页的head标签上面设置meta，好比：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
复制代码

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

是的，咱们可使用REM来进行适配啊：能够说是目前最强的移动端适配方案...

rem是什么

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

咦，都是固定了根元素是默认16px了，如何设备不一样的移动设备呢？

问题提出也是答案所在，咱们动态改变根元素html的字体默认大小不就好了嘛！见下：

rem自适应处理方案

使用rem布局的时候，为了兼容不一样的分辨率，咱们应该要动态的修正根字体的大小，让全部的用rem单位的子元素跟着一块儿缩放，从而达到自适应的效果。

嗯，下面就是动态改变根字体的大小了，采起的固然是javascript来进行控制啦，否则怎么知道像素比哦。

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

(function(){
	var devicePixelRatio = window.devicePixelRatio || 1;
})();
复制代码

嗯，在移动端上面适配，rem和viewport搭配效果更佳哦！完整代码片断以下：

<head>
	<meta name="viewport" />
</head>
复制代码

(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走一下：

#container{
	background: yellow;
	margin: 0 auto;
}
h1{
	text-align: center;
}
复制代码

若有纰漏，欢迎看到的各位小哥哥小姐姐指正 @～@！更多内容请前往个人github