【HTML + CSS】CSS 響應式佈局（一）
響應式開發的本質是針對多種螢幕做適配，首先需要掌握幾個基本概念：
iPhone 6 Plus
使用 rem 實現響應式佈局
rem （font size of the root element）是 CSS 的計量單位，表示相對於根（即 html ）元素的字型大小。其主要用於移動 Web 開發，以適配不同尺寸的螢幕。
rem 的相容可以通過 caniuse 查詢
由於 rem 單位是相對於網頁根元素的字號大小而定，所以實現 rem 佈局開發時，首先要做的就是對根元素的字號賦值。
html{ font-size:12px; }
我們將網頁根元素的字號設定為 12px ,此時 rem 相對於網頁根元素字號為 1rem = 12px 。故此轉換 rem 的公式則為
rem值 = 元素實際 px 值 / 網頁根元素的字號
下面通過 rem 實現一個簡單的佈局 【 預覽 】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rem Case</title>
<style>
body {
font-size: 12px;
margin: auto;
}
.btns {
width: 10rem;
margin: 0 auto;
}
.btns > a {
float: left;
width: 2.5rem;
text-align: center;
padding-top: 0.2rem;
}
.btns > a > i {
display: inline-block;
width: 1.2rem;
height: 1.2rem;
background: gray;
border-radius: 50%;
}
.btns>a>span {
display: block;
line-height: 0.8rem;
font-size: 14px;
}
</style>
</head>
<body>
<div class="btns">
<a>
<i></i>
<span>英語</span>
</a>
<a>
<i></i>
<span>日語</span>
</a>
<a>
<i></i>
<span>德語</span>
</a>
<a>
<i></i>
<span>法語</span>
</a>
<a>
<i></i>
<span>韓語</span>
</a>
<a>
<i></i>
<span>小語種</span>
</a>
<a>
<i></i>
<span>教學</span>
</a>
<a>
<i></i>
<span>職場</span>
</a>
</div>
</body>
</html>
最後加上最關鍵的重置元素字號指令碼
(function (window, document) {
'use strict';
// 獲取網頁根元素
var html = document.documentElement || document.querySelector('html');
// 重置根元素字號
function resetFontSize() {
// 獲取根元素的寬度
var width = html.getBoundingClientRect().width;
// 設定一個最大寬度值
if (width > 640) width = 640;
html.style.fontSize = (width / 10) + 'px';
}
resetFontSize();
window.addEventListener('resize', resetFontSize, false);
})(window, document);
rem 確實有效的解決了響應式佈局，但卻並非完美：
js rem
使用 vw、vh、vmin、vmax 實現響應式佈局
vw 、 vh 、 vmin 、 vmax 與 rem 相同都是 CSS3 中新引入的一種計量單位。不同於 rem 它們所表達的含義如下：
| 單位 | 含義 |
|---|---|
| vw | 等於視口寬度的 1% |
| vh | 等於視口高度的 1% |
| vmin | 相視的寬度或高度，取決於哪個更小 |
| vmax | 相對於視的寬度或高度，取決於哪個更大 |
vw 、 vh 、 vmin 、 vmax 的相容可以通過 caniuse 查詢
在使用 vw 、 vh 、 vmin 、 vmax 之前我們需要認識一下視口。
以 PPK大神 在其文章 A tale of two viewports （一） 、 A tale of two viewports （二） 以及 Meta viewport 三篇文章 中提出關於視口的解釋：
- 在桌面端:
The function of the viewport is to constrain the <html> element,which is the uppermost containing block of your site.
譯：視口的功能是約束 html 元素，它是網站上的包含區塊。
The viewport, in turn, is exactly equal to the browser window: it’s been defined as such. The viewport is not an HTML construct, so you cannot influence it by CSS. It just has the width and height of the browser window — on desktop.
譯：視口與瀏覽器視窗完全相同，但它並不是 HTML 結構，因此你不能通過 CSS 來影響它。在桌面端，視口只是具有瀏覽器視窗的高度與寬度。
以上是我在原文中擷取的兩段關於桌面端的視口概念，從中總結得知： 在桌面端,視口就是瀏覽器的視覺化區域，其只是具有瀏覽器視窗的高度和寬度，使用 document.documentElement.clientWidth/Height 獲取視口寬高 。
- 在移動端：
Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.
譯：設想佈局視口是一個不改變形狀和大小的大影象,現在你有一個更小的框架通過它你可以看到大的影象。這個框架被不透明的材料包圍，遮擋了除大影象的一部分之外的其他部分。你可以通過框架看到的大影象的部分就是視覺視口（ visual viewport）。你可以縮小大影象直至看到整個大影象，或者你可以放大到只看其一部分。你可以去改變框架的方向，但是這個大影象（佈局視口）的大小和形狀永遠不會改變.
The visual viewport is the part of the page that’s currently shown on-screen.The user may scroll to change the part of the page he sees, or zoom to change the size of the visual viewport.
譯：視覺視口就是當前顯示在螢幕上頁面的一部分。使用者可以通過滾動改變看到的頁面的一部分，或者縮放以更改視覺視口的大小。
However, the CSS layout, especially percentual widths, are calculated relative to the layout viewport, which is considerably wider than the visual viewport.
譯：然而，CSS 佈局，特別是百分比的寬度，是相對於佈局視口計算的，它要比視覺視口寬的多。
How wide is the layout viewport? That differs per browser. Safari iPhone uses 980px, Opera 850px, Android WebKit 800px, and IE 974px.
譯：佈局視口有多寬呢？每個瀏覽器是不同的，Safari 使用 980px，Opera 850px, Android WebKit 800px, IE 974px。
The <meta name="viewport" content="width=320">; originally an Apple extension but meanwhile copied by many more browsers. It is meant to resize the layout viewport.
譯：<meta name="viewport" content="width=320">，最初是蘋果的擴充套件，但同時被多個瀏覽器採納，它是用於調整佈局視口埠的大小。
以上是我在原文中對移動端視口概念的擷取，從中總結可得知：
移動端的視口分為三部分:
-
視覺視口（visual viewport）：就是裝置的螢幕區域，但是它所對應的並不是指螢幕區域裡的物理畫素，而是CSS畫素。當用戶縮小或放大時，測量會發生變化，因為更多或更少的CSS畫素會融入螢幕。使用window.innerWidth/Height獲取視覺視口的寬高。 -
佈局視口（layout viewport）：與視覺視口不一樣，它是為了解決PC 端網站在移動端顯示不佳的一個解決方案,它寬高不會改變，使用document.documentElement.clientWidth/Height來獲取佈局視口的寬高。 -
理想視口（ideal viewport）：它是基於佈局視口的，用於調整佈局視口埠的大小。
既然提到了 理想視口（ideal viewport） ，那麼就不得不普及一下 <meta name="viewport"> 。
viewport 屬性
viewport 是指螢幕上能用來顯示網頁的區域，預設情況下大多數裝置的 viewport 的寬度都是 980 畫素 ，可以通過在 heade 元素中增加 meta 標籤來設定 viewport 屬性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body></body> </html>
viewport 下包含以下屬性：
-
width：設定viewport的寬度，為正整數，或者字串 “device-width”。 -
initial-scale：設定viewport的初始縮放值，為數字，可以帶小數。 -
minimum-scale：設定viewport的最小縮放值，為數字，可以帶小數。 -
maximum-scale：設定viewport的最大縮放值，為數字，可以帶小數。 -
height：設定viewport的高度。 -
user-scalable：是否允許使用者縮放，值為 "yes" 或 "no"。
通過設定 viewport 屬性，可以調整使用者介面的邏輯大小，頁面 CSS 中的大小均以 viewport 為基準。
vw、vh、vmin、vmax 的使用
基礎的東西說完了，接著回到 vw 、 vh 、 vmin 、 vmax 的使用，它們相對於 PC 端瀏覽器的視口就是 瀏覽器的視覺化區域 ，而在移動端則為 佈局視口 ，還是以第一個案例為例，使用 vw 實現佈局【 預覽 】：。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VW Case</title>
<link rel="shortcut icon" href="../../assets/images/icon/favicon.ico" type="image/x-icon">
<style>
body {
font-size: 12px;
margin: auto;
}
.btns {
width: 80vw;
margin: 0 auto;
}
.btns>a {
float: left;
width: 20vw;
text-align: center;
padding-top: 10px;
}
.btns>a>i {
display: inline-block;
width: 10vw;
height: 10vw;
background: gray;
border-radius: 50%;
}
.btns>a>span {
display: block;
line-height: 3vw;
font-size: 14px;
}
</style>
</head>
<body>
<div class="btns">
<a>
<i></i>
<span>英語</span>
</a>
<a>
<i></i>
<span>日語</span>
</a>
<a>
<i></i>
<span>德語</span>
</a>
<a>
<i></i>
<span>法語</span>
</a>
<a>
<i></i>
<span>韓語</span>
</a>
<a>
<i></i>
<span>小語種</span>
</a>
<a>
<i></i>
<span>教學</span>
</a>
<a>
<i></i>
<span>職場</span>
</a>
</div>
</body>
</html>
vw 、 vh 、 vmin 、 vmax 的出現給我的感覺顯得有些雞肋，有點像 % ，但與百分比最大的不同則是 % 是相對於父元素的大小設定的比率， vw 、 vh 是視口大小決定的 。在使用它的過程中，個人認為它並不適合去做佈局，而是去做一些元素大小的限制。當然，也是因為個人能力有限，並沒有悟透，希望能夠得到大神的指點。