移動端三種適配方案

時間 2019-11-08

標籤移動三種適配方案欄目無線简体版

原文原文鏈接

1.meta-viewport適配

背景

viewport:中文的意思就是「視口」，一般就是瀏覽器用於顯示頁面的區域，可是在移動端，viewport通常都要大於瀏覽器的可視區域，保證PC頁面在移動頁面上面的可視性，這是由於考慮到移動設備的分辨率相對於桌面電腦來講都比較小，因此爲了能在移動設備上正常顯示那些傳統的爲桌面瀏覽器設計的網站，移動設備上的瀏覽器都會把本身默認的viewport設爲980px或1024px（也多是其它值，這個是由設備本身決定的），這樣作是由於許多頁面沒有作移動端優化，在小窗口渲染時會亂掉（或看起來亂）。因此，這種虛擬視口是一種讓未作移動端優化的網站在窄屏設備上看起來更好的辦法。javascript

三種類型

1.layoutviewport: 大於實際屏幕，元素的寬度繼承於layoutviewport，用於保證網站的外觀特性與桌面瀏覽器同樣。css

visualviewport: 當前顯示在屏幕上的頁面，即瀏覽器可視區域的寬度。html

idealviewport: 爲瀏覽器定義的可完美適配移動端的理想 viewport，固定不變，能夠認爲是設備視口寬度。好比 iphone 7 爲 375px, iphone 7p 爲 414px。目前最經常使用的就是第三種，idealviewport,也就是設備寬度多大，css頁面的寬度就多大，在移動端使用它很是簡單，只要在html頁面的head標籤之間添加：java

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>css3

五種屬性

其中device-width意思是設備寬度，移動設備默認的viewport是layoutviewport,將width 設置爲device-width，就會將寬度切換爲idealviewport類型，下來分別說明下各個屬性的意思： width:屬性控制視口的寬度,能夠設置具體的寬度如：width=700，可是通常這麼使用，都是使用width=device-width瀏覽器

inital-scale:頁面初始縮放值，默認爲1；

maximum-scale：容許用戶縮放到的最大比例。

minimum-scale：容許用戶縮放到的最小比例。

user-scalable：用戶是否能夠手動縮放。
複製代碼

2.媒體查詢適配

媒體查詢是第二種移動端適配方案，它屬於css3的屬性，使用 @media 查詢，你能夠針對不一樣的媒體類型定義不一樣的樣式。 @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式，特別是若是你須要設置設計響應式的頁面，@media 是很是有用的。當你重置瀏覽器大小的過程當中，頁面也會根據瀏覽器的寬度和高度從新渲染頁面。bash

使用方法：

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />能夠直接在link標籤中插入媒體查詢css 上面的意思表示若是瀏覽器可視區域小於等於800px時，就執行example.css中的樣式。iphone

<style>
@media (max-width: 600px) {
  body {
    background-color:red;
  }
}
</style>
複製代碼

也可使用嵌入式css寫法,效果同上使用and能夠將多個媒體查詢屬性，如： (min-width: 700px) and (orientation: landscape) { ... }ide

表示在寬度小於等於800px且橫屏時應用這個css樣式佈局

使用，（逗號）可使得多個媒體查詢屬性中有任意一個屬性符合要求，就應用後面的css樣式

@media (min-width: 700px), handheld and (orientation: landscape) { ... }表示當符合前一項媒體查詢屬性或者後一項媒體查詢屬性時應用後面的css樣式

使用not能夠排除後面的媒體查詢屬性，在其他的媒體查詢中應用css樣式

@media not (max-width:700px){...}表示在寬度大於700px時，應用css樣式

3.em和rem動態適配

em和rem都是相對單位長度，em是相對父級font-size來變化的，他會繼承父級元素的字體大小，表明倍數，如：瀏覽器默認font-size:16px,那麼em就是1em，

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  body{
    font-size:20px;
  }
    div{
     font-size:2em
    }
  </style>
</head>
<body>
<div>nihao</div>
</body>
</html>
複製代碼

當給body設置font-size：20px，後，div設置font-size：2em，div的font-size實際變成了40px,

不過在實際佈局中，若是嵌套過深，em計算起來比較的繁瑣，容易出現錯誤，所以不見大範圍使用，小範圍能夠結合其它長度單位來使用，

rem是相對於html根元素font-size來變化的，始終是基於根元素字體大小，也表明倍數，瀏覽器默認的font-size爲16px,那麼rem單位就是1rem；

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
  body{
    font-size:20px;
  }
    div{
     font-size:2rem
    }
  </style>
</head>
<body>
<div>nihao</div>
</body>
</html>
複製代碼

當給body設置爲font-size：20px，給div設置爲font-size:2rem,div的實際font-size變成了32px,在移動端佈局中使用rem，因爲它是基於根元素的，因此只要根元素不發生變化，那麼頁面就不會發生變化，同時呢也沒有em的繁瑣嵌套計算，在配合上動態計算rem的javascript代碼，使之在移動端佈局中廣受歡迎，使用以下javascript代碼便可動態計算

(function(win) {
	var doc = win.document;
	var docEl = doc.documentElement;
	var tid;
	function refreshRem() {
		var width = docEl.getBoundingClientRect().width;        
		if (width >=750) width = 750;
		if(width<=320) width=320;
		var rem = width / 7.5;
		docEl.style.fontSize = rem + 'px';		
	}
	win.addEventListener('resize', function() {
		clearTimeout(tid);
		tid = setTimeout(refreshRem, 300);
	}, false);
	refreshRem();
})(window);
複製代碼

在手機端和平板上面尺寸支持良好，雖然rem的使用看上去十分完美，可是在一些須要固定間距的地方使用會形成頁面錯亂或者樣式出錯，這種狀況下建議搭配px來使用，另外多種長度單位搭配使用，能夠解決一些單一長度單位佈局帶來的bug，

對於這兩年興起的vw、vh響應式佈局，因爲vw，vh的特性，他們可以根據窗口大小來自動調節字體大小，而不用管使用設備的分辨率大小，這就能很輕鬆地完成響應式頁面的佈局，看似很美好，簡單又快，可是在個別移動端瀏覽器上的兼容性仍是有點小問題，如需使用的話，建議搭配rem來佈局，後續我將再對其兼容性測試一番，知足使用需求的話，再行補充相關知識。

相關標籤/搜索

每日一句

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