可愛的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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。