【HTML + CSS】CSS 響應式佈局（一）

時間 2019-12-10

標籤 HTML + CSS css 響應佈局欄目 CSS 简体版

原文原文鏈接

響應式開發的本質是針對多種屏幕作適配，首先須要掌握幾個基本概念：javascript

物理像素：設備的屏幕實際像素點，如常說的 iPhone 6 Plus的分辨率是 1920 * 1080 像素。
設備獨立像素：邏輯像素，用於定義應用的UI。
屏幕像素比（devicePixeRatio）：物理像素與設備獨立像素的比值。

使用 rem 實現響應式佈局

rem（font size of the root element）是 CSS的計量單位，表示相對於根（即 html）元素的字體大小。其主要用於移動 Web開發，以適配不一樣尺寸的屏幕。css

rem的兼容能夠經過 caniuse 查詢html

因爲 rem單位是相對於網頁根元素的字號大小而定，因此實現 rem佈局開發時，首先要作的就是對根元素的字號賦值。java

html{ font-size:12px; }

咱們將網頁根元素的字號設置爲 12px,此時 rem相對於網頁根元素字號爲 1rem = 12px。故此轉換 rem的公式則爲git

rem值 = 元素實際 px 值 / 網頁根元素的字號

下面經過 rem實現一個簡單的佈局【預覽】github

<!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它們所表達的含義以下：ide

單位	含義
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是視口大小決定的。在使用它的過程當中，我的認爲它並不適合去作佈局，而是去作一些元素大小的限制。固然，也是由於我的能力有限，並無悟透，但願可以獲得大神的指點。