前端必須知道的移動端rem和vw適配

時間 2019-11-06

標籤前端必須知道移動 rem 適配欄目無線简体版

原文原文鏈接

移動端適配，是一個老生常談的問題了，具體的知識點和理論知識，我也就不說了，你們能夠參考下面這篇文章javascript

不要再問我移動適配的問題了css

超詳細的rem+vw移動端屏幕適配方案html

下面用到的名詞 rem vw less 設備獨立像素等等都在這兩篇文章裏java

rem適配

記住一句話：rem是html標籤的字體大小，即：1rem=html.style.fontSizesegmentfault

咱們先以iphone6/7/8爲基礎適配其餘的屏幕瀏覽器

以iphone6/7/8爲例，設備寬度爲 375px(設備獨立像素，即css像素)sass

1.創建以下目錄

2.動態計算rem的

在home.html引入less.js和home.less,在head標籤動態計算rem,代碼以下bash

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
	    <meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no" >		
		<link rel="stylesheet/less" href="css/home.less" />
		<title>首頁</title>
		<script > //當即執行函數 ()(function(){ //動態計算rem，以屏幕寬度375px爲例  function resetRem(){ //1.獲取html標籤 var html=document.body||document.documentElement; //2.獲取html標籤的寬度,並限制最大寬度 var htmlWidth=html.getBoundingClientRect().width; if(htmlWidth>768){ htmlWidth=768 } //3.動態計算rem，將屏幕寬度分紅15份（20份、25份、30份都行，整數好計算），每一份的大小就是1rem html.style.fontSize = htmlWidth / 15 + "px"; //此時爲1rem=25px=html.style.fontSize } //4.頁面加載時調用 resetRem(); //5.頁面尺寸發生變化時再調用一下 window.onresize=function(){ resetRem(); } }) </script>
	</head>

	<body>
		
		<div class="box">
			測試用的box
		</div>
	
		<script src="js/less.js"></script>	
	</body>

</html>
複製代碼

3.使用less.js將px轉爲rem

前面將屏幕分紅15份經算出 1rem=25pxless

因此咱們在home.less中定義變量@r:25remiphone

注意，若是不是分紅15份，好比分紅20份，那麼1rem=375/20=18.5px,則變量@r:18.5rem,；若是分紅25份，那麼1rem=375/25=15px,則變量@r:15rem

而後設置.box樣式,寬高爲200px和300px

200/25rem=8rem

300/25rem=10rem

將寬高除以變量@r，就能夠獲得以rem爲單位的大小

@r:25rem;
 .box {
     width: 200/@r; //8rem
     height: 300/@r; //12rem
     background-color: red;
 }
複製代碼

前面說到當前1rem=25px是在屏幕尺寸爲375px下計算的

即1rem=html.style.fontSize=當前屏幕寬度/份數

//3.動態計算rem，將屏幕寬度分紅15份（20份、25份、30份都行，整數好計算），每一份的大小就是1rem
html.style.fontSize = htmlWidth / 15 + "px";  //此時爲1rem=25px=html.style.fontSize
複製代碼

因此每當屏幕發生寬度發生變化時（用戶手機類型不一樣時）

就會從新計算rem，這樣咱們獲得的rem值就是根據當前屏幕寬度動態計算的，這樣能夠適配多種手機屏幕

4.瀏覽器打開查看樣式

iphone6/7/8下的樣式

iphone6/7/8 plus下的樣式

三星s5下的樣式

能夠看出，在不一樣屏幕下，width和height都是8rem和10rem，至於別的屬性的設置，如字體、邊距、定位等等，只要知道px的大小，按照width和height的設置方式便可，

vw適配

還以iphone6/7/8爲例，設備寬度爲 375px(設備獨立像素，即css像素)

記住：100vw=當前屏幕寬度=375px

因此：1vw=3.75px=1%*當前屏幕寬度

1. 使用less.js將px轉換vw

在home.less中定義一個變量@v=3.75vw

而後設置.box樣式，寬高都是300px

將寬高除以變量@v，就能夠獲得以vw爲單位的打大小

@v: 3.75vw;
 .box {
    width: 300/@v; 
    height: 300/@v;
    background-color: blue;
}
複製代碼

2.瀏覽器打開查看樣式

iphone6/7/8下的樣式

iphone6/7/8 plus下的樣式

三星s5下的樣式

能夠看出能夠看出，在不一樣屏幕下，width和height都是80vw，而1vw=1%*當前屏幕寬度，因此在任何手機上都能適配

總結

rem適配

優勢：兼容性好
缺點：須要js進行動態計算，相對繁瑣

vw適配

優勢：設置超級簡單，結合less/sass一個變量便可
缺點：兼容性低（貌似如今的手機都能兼容了吧）

建議

適配沒有銀彈，沒有最優解，以上只是最簡單的適配方法，另外我也是一個菜鳥，搬磚的

相關標籤/搜索

每日一句

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