響應式 Web 設計指南「基礎篇」

時間 2019-12-07

標籤響應 web 設計指南基礎欄目 HTML 简体版

原文原文鏈接

Web 是廣泛存在的，也是無處不在的，Web能夠適應任何尺寸的屏幕以及任何使用環境，由於Web有其固有的靈活性和可塑性。css

Web 不再是某一平臺獨有的礦藏，而是真正成爲了一張名副其實的大網，並將各類設備彼此鏈接在一塊兒。web

而做爲開發人員要想不被這愈發迅猛的設備大潮所吞噬，就必須拋棄以前的一切，轉而學會適應它、尊重它。瀏覽器

流動佈局

隨着愈來愈多設備的涌現，人們愈來愈難以繼續忽略Web所固有的靈活性和不可預測性。佈局

而做爲擁抱靈活性的第一步，就是要爲咱們的站點建立流動佈局，並藉此來對不一樣尺寸的設備屏幕作出不一樣的相應。性能

佈局選項

　　固定佈局：在固定佈局中，頁面寬度會被指定爲特定大小的像素，其中960px是使用最爲普遍的寬度。測試

　　流動佈局：在流動佈局中，度量的單文再也不是像素，而是變成了百分比，這樣可以使頁面具備可變的特性。字體

　　彈性佈局：彈性佈局與流動佈局相似，只是一般狀況下彈性佈局會以em來做爲單位（1em=16px）。網站

　　混合佈局：最後一種選擇就是混合佈局，它結合了上面提到的兩種或兩種以上的佈局方式。spa

那麼到底哪一種方式纔是最具響應性的呢？從根本上來講，這取決於你特定的項目。不過，在大多數狀況下，流動佈局、彈性佈局...相比固定佈局更能適應變化。scala

字體大小

　　像素：因爲不一樣的設備有着不一樣的像素密度，因此使用像素做爲字體大小的單位，是與web的靈活性原則背道而馳的作法。

　　em：em能夠跨瀏覽器進行縮放，並且它也是級聯的。級聯意味着你只須要調整初始化時的基準，其他部分就會自動地進行調整，並且是按比例調整的。

　　百分比：和以em爲單位的字體同樣，以百分比爲單位的字體也是可縮放的，並且也是級聯的。

　　rem：rem與em的區別在於，rem的大小與根元素（HTML）有關。使用rem可以避免發生在嵌套元素中的級聯問題。

使用em做爲字體的單位是一種更加流行、更具靈活性的方法。使用em不但可使文字可以縮放，並且維護起來也更加容易。

網格佈局

網格有助於實現站點的平衡、間距以及組織結構。一個實現良好的網格系統會使你的站點層次分明，同時還能夠提升頁面的可讀性和可瀏覽性。

使用網格要作的第一件事就是肯定畫布。你得先把畫布劃分出若干你須要的列，而後才能繼續後面的工做。

讓你的內容來決定你的站點結構是一種很好的設計方法，並且這樣作也是很是實用的。從一開始就讓網格配合內容，這會讓每一個頁面的設計都更具粘性。

box-sizing: border-box 可讓瀏覽器將 padding 的值算在已經定義好的元素寬度內部。經過這一屬性，可以使得設計流動佈局變得更加容易。

媒介查詢

流動佈局是個偉大的開端，它消除了固定佈局中的種種限制，並使站點能在不一樣分辨率的屏幕上都能漂亮地展現，可是它也只能帶你走這麼遠。

媒介查詢可讓你根據在特定環境下查詢到的各類屬性值（好比屏幕分辨率）來決定應用什麼樣的樣式。經過使用媒介查詢，就能夠根據屏幕尺寸對頁面作出相應調整了。

視口標籤和屬性

視口就是瀏覽器的可視區域，也指瀏覽器的寬度。

視口標籤的形式很是簡單，只需指定使用的視口元標籤，而後列出一些聲明便可：

<meta name="viewport" content="width=device-width" />

該元標籤須要放在 HTML 文件的 head 標籤中：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>

　　width：width 聲明可讓你將視口設置爲某一特定的寬度，或者設置爲設備屏幕的寬度。在 width 聲明中使用 device-width 是最佳的選擇。

　　height：與 width 對應的就是 height，height 容許你指定一個特定的高度。事實上 height 並不經常使用，除非你不想讓頁面垂直滾動。

　　user-scalable：user-scalable 聲明會告訴瀏覽器，是否容許用戶在頁面上進行縮放。在那些追求完美到像素的設計中，經常將user-scalable屬性設置爲no。

　　initial-scale：經過給 initial-scale 賦值爲 0.1（10%）到 10.0（1000%）之間的某個數，來設置頁面初始化的縮放層級。

　　maximum-scale：maximum-scale 聲明能夠告訴瀏覽器容許用戶放大頁面到什麼程度。若是將 maximum-scale 設置爲1.0，一樣能夠禁止用戶縮放頁面。

　　minxmum-scale：minimum-scale 聲明會告知瀏覽器容許用戶將頁面縮小到什麼程度，其默認值是0.25（25%）。

媒介查詢結構

媒介查詢能夠經過詢問瀏覽器來肯定特定的表達式是否爲真。若是爲真，那麼就加載一些特殊的、適用於這種狀況的樣式，從而達到調整佈局的目的。

媒介查詢的通常形式爲：

@media [not|only] type [and] (expr) {
    rule
}

type：媒介類型，特定的目標設備類型
expr：媒介表達式，測試某一特性是否爲真
only：邏輯關鍵詞，例如 and、or、not、only
rule：規則，調整顯示效果的基本樣式

css中定義了10種不一樣的媒介類型，每一種媒介類型都會告訴瀏覽器是否要加載特定的樣式表。但在實際的使用過程當中，你會發現你幾乎只會用到 screen（彩色計算機屏幕）。

樣式表中的媒介查詢語句以下：

<style>
    @media screen {
        h1 {
            font-size: 1.2rem;
        }
    }
</style>

此外，你也能夠採用外部樣式文件的形式，並在link元素內指定媒介屬性：

<link rel="stylesheet" href="screen.css" media="screen" />

就媒介類型自己而言，它只容許你指定設備的類型，可是爲了對頁面進行進一步細分，你須要縮小設備的範圍，這時就該媒介表達式登場了。

媒介表達式

媒介查詢的強大之處在於它們可以利用表達式來檢測出設備不一樣特性的真假值。

例如經過下面這條簡單的聲明，你就能夠判斷出設備視口的寬度是否大於320px：

@media screen and (min-width:320px) {
    /* css rule */
}

這條語句首先會檢測訪問頁面的設備是否屬於 screen，而後測試設備的視口寬度，其中 min- 前綴會保證視口寬度至少爲320px。

經常使用的媒介特性有 width（設備顯示區域的寬度）、height（設備顯示區域的高度）、orientation（指定設備處於豎直或水平狀態）、resolution（設備的分辨率dpi）。

邏輯關鍵字

除了媒介類型和媒介表達式外，你還能夠經過使用可選的關鍵字，來使媒介查詢語句具備更強大的功能。

　　AND：你可使用 and 來測試多個表達式。 @media screen and (color)

　　NOT：對整個表達式的結果取反，而不是對部分表達式的結果取反。 @media not screen and (color)

　　OR：使用逗號在一系列表達式中的某一個爲真時，加載某些樣式表。 @media screen and (color), print and (color)

　　ONLY：對於部分老式瀏覽器，使用only關鍵字能夠隱藏媒介查詢。 @media only screen and (color)

規則

媒介查詢中的最後一塊內容，就是你要應用的實際樣式規則。

你能夠在這裏寫基本的CSS規則，它們惟一的特殊之處就是位於媒介查詢裏面：

@media only screen and (min-width: 800px) and (max-width:1000px) {
    body {
        font-size: 1.2rem;
        font-family: arial;
    }
}

內嵌樣式與外部樣式

媒介查詢既能夠寫在頁面內部，也能夠經過 link 元素的 media 屬性被包含到頁面中來。

<style>
    @media only screen and (min-width:1200px) {
        a {
            text-decoration: underline;
        }
    }
</style>

<link href="style.css" media="only screen and (min-width:1200px)" />