移動端三種適配方案

CSS · 發表 2019-04-12 19:14:54

摘要： viewport:中文的意思就是“ 視口 ”，通常就是瀏覽器用於顯示頁面的區域，但是在移動端，viewport一般都要大於瀏覽器的可視區域，保證PC頁面在移動頁面上面的可視性，這是因為考慮到移動裝置的解析度相對於桌面電腦來說都比較小，所以為了能在移動裝置上正常顯示那些傳統的為桌面瀏覽器設計的...

viewport:中文的意思就是“ 視口 ”，通常就是瀏覽器用於顯示頁面的區域，但是在移動端，viewport一般都要大於瀏覽器的可視區域，保證PC頁面在移動頁面上面的可視性，這是因為考慮到移動裝置的解析度相對於桌面電腦來說都比較小，所以為了能在移動裝置上正常顯示那些傳統的為桌面瀏覽器設計的網站，移動裝置上的瀏覽器都會把自己預設的viewport設為980px或1024px（也可能是其它值，這個是由裝置自己決定的），這樣做是因為許多頁面沒有做移動端優化，在小視窗渲染時會亂掉（或看起來亂）。所以，這種虛擬視口是一種讓未做移動端優化的網站在窄屏裝置上看起來更好的辦法。

三種類型

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

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

idealviewport: 為瀏覽器定義的可完美適配移動端的理想 viewport，固定不變，可以認為是裝置視口寬度。比如 iphone 7 為 375px, iphone 7p 為 414px。目前最常用的就是第三種，idealviewport,也就是裝置寬度多大，css頁面的寬度就多大，在移動端使用它非常簡單，只要在html頁面的 head 標籤之間新增：

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

五種屬性

其中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 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

使用方法：

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

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

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

表示在寬度小於等於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，