響應式 Web 設計

響應式Web

彈性網格佈局、彈性圖片/媒體、媒體查詢
所謂響應式Web設計，就是網頁內容會隨着訪問它的視口及設備的不同而呈現不同的樣式。
設計思路
- 即先爲小屏幕設計內容、樣式，然後再向大屏幕擴展

爲什麼不用 width:100% ?
要實現圖片的自動縮放，也可以使用更通用的 width 屬性，比如
width:100% 。然而，這條規則在這裏的效果不同。如果給 width 屬性設置一個
值，那麼圖片就會按照該值顯示，不考慮自身固有寬度。以我們例子中的LOGO
（同樣也是一張圖片）爲例，這條規則會導致它顯示得跟它的容器一樣寬。在容
器比圖片寬得多的情況下（就像我們這裏的LOGO一樣），圖片會被無謂地拉伸。

媒體查詢

body {
	background-color: grey;
}
@media screen and (min-width: 320px) {
    body {
   	 	background-color: green;
    }
}
@media screen and (min-width: 550px) {
    body {
    	background-color: yellow;
    }
}
@media screen and (min-width: 768px) {
    body {
    	background-color: orange;
    }
}
@media screen and (min-width: 960px) {
    body {
    	background-color: red;
    }
}

CSS中的 @import會增加 HTTP 請求（進而影響加載速度），因此請慎用
常見的是在CSS文件內部直接使用媒體查詢

使用媒體查詢鏈接不同的 CSS 文件

CSS屬於**“阻塞渲染”**的資源。換句話說，瀏覽器需要下載並解析鏈接的CSS文件，然後再渲染頁面。
請注意，「阻塞渲染」僅是指該資源是否會暫停瀏覽器的首次頁面渲染。無論CSS是否阻塞渲染，CSS資源都會被下載，只是說非阻塞性資源的優先級比較低而已。

分隔媒體查詢的利弊

多個文件就會多個HTTP請求，HTTP請求多了會明顯影響頁面加載速度。
性能優化
-  所有圖片都壓縮過了；
   所有腳本都拼接和縮短了；
   所有資源都採用了gzip壓縮；
   所有靜態內容都緩存到了CDN；
   所有多餘的CSS規則都被清除了
除非在極端情況下，否則我都建議在既有的樣式表中寫媒體查詢，跟常規的規則寫在一起。

組合媒體查詢還是把它們寫在需要的地方

.thing {
	width: 50%;
}
@media screen and (min-width: 30rem) {
    .thing {
    	width: 75%;
    }
}
/* 這裏是另外一些樣式規則 */
.thing2 {
	width: 65%;
}
@media screen and (min-width: 30rem) {
    .thing2 {
   	 	width: 75%;
    }
}

寫在一起的話，便於維護代碼，雖然這樣寫看起來有點蠢，！但是！，如果該規則需要視條件而變，那我就把相應的媒體查詢緊接着寫在它的下面。這樣在需要查找與某個選擇符相關的規則時，就不用再從
**一個一個的代碼塊裏找了。**而且，事實上gzip壓縮（應該用它來壓縮服務器上的所有可以壓縮的資源）完全可以把差別降到可以忽略不計的程度。

彈性佈局與響應式圖片

即媒體查詢雖然可以讓我們根據視口大小分別切換不同的樣式，但我們的設計在這些“斷點”之間必須要平滑過渡才行。而使用彈性佈局就可以輕鬆解決這個問題，實現設計在媒體查詢斷點間的平滑過渡。
將固定像素大小轉換爲彈性比例大小，這個轉換有一個簡單的公式
- $結果 = 目標/上下文$
兩個響應式Web設計的核心技術：將固定大小轉換爲比例大小，以及使用媒體查詢相對於視口大小應用CSS規則。

一是比例值的小數點後面是否真有必要帶那麼多數字。儘管寬度本身最終會被瀏覽器轉換爲像素，但保留這
些位數有助於將來的計算精確（比如嵌套元素中更精確的計算）。因此我保留小數點後面的所有位數。

二是在實際的項目中要考慮JavaScript不可用的情況，此時也應該保證用戶能看到菜單內容。

既有佈局技術，比如行內塊、浮動以及表格的缺點

行內塊與空白

使用行內塊（inline-block）來佈局的最大問題，就是它會在HTML元素間渲染空白。
- 解決方案： font-size:0

浮動

第一個，如果給浮動元素的寬度設定百分比，那麼最終計算值在不同平臺上的結果不一樣（有
的瀏覽器向上取整，有的瀏覽器向下取整）。於是，有時候某些區塊會跑到其他區塊底下，而有
時候這些區塊一側又會莫名出現一塊明顯的間隙。
第二個，通常都要清除浮動，才能避免父盒子/元素摺疊。雖然很容易做，但每次清除都相
當於在提醒我們：浮動並非一個地道的佈局機制。

Flexbox 概述

 方便地垂直居中內容
 改變元素的視覺次序
 在盒子裏自動插入空白以及對齊元素，自動對齊元素間的空白
 讓你年輕10歲（也許沒那麼誇張，但以我有限的經驗來看，它能減少你不少壓力）

使用 Flexbox

Flexbox有4個關鍵特性：方向、對齊、次序和彈性

完美垂直居中文本

.class {
    /* 其他屬性 */
    display: flex;
    align-items: center;
    justify-content: center;
}

 display: flex ：這是Flexbox的根本所在。這裏就是把當前元素設置爲一個Flexbox（而
不是 block 或 inline-block 之類的）。
 align-items ：這是要在Flexbox中沿交叉軸對齊項目（在這個例子中垂直居中文本）。
 justify-content ：在這裏設置內容沿主軸居中。在Flexbox中，可以把它想象成Word
軟件中的一個按鈕，用於左、中、右對齊文本（稍後我們會介紹， justify-content 還
有其他值）。

偏移

display: flex;
align-items: center;

反序
```
 flex-direction: row-reverse
```
垂直排列

在包含元素中使用 flex-direction:column; ，再把自動外邊距屬性刪掉：

display: flex;
flex-direction: column;
align-items: center;

Flexbox 的對齊

關於Flexbox的對齊，最重要的是理解座標軸。有兩個軸，“主軸”和“交叉軸”。這兩個軸
代表什麼取決於Flexbox排列的方向。比如，如果將Flexbox的方向設置爲 row ，則主軸就是橫軸，
而交叉軸就是縱軸。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-xthVLjQn-1574610637824)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20191124221154717.png)]

交叉軸的對齊

Flexbox爲交叉軸對齊提供了以下值。
 flex-start ：把元素的對齊設置爲 flex-start ，可以讓元素從Flexbox父元素的起始邊
開始。
 flex-end ：把元素的對齊設置爲 flex-end ，會沿Flexbox父元素的末尾對齊該元素。
 center ：把元素放在Flexbox元素的中間。
 baseline ：讓Flexbox元素中的所有項沿基線對齊。
 stretch ：讓Flexbox中的所有項（沒交叉軸）拉伸至與父元素一樣大。

justify-content

justify-content 可以告訴瀏覽器怎麼處理其餘空間。
space-between 會在子元素之間添加相同寬度的空白，
space-around 則在它們兩邊各添加相同寬度的空白。

響應式圖片

通過 srcset 切換分辨率

<img src="scones_small.jpg" srcset="scones_medium.jpg 1.5x, scones_
large.jpg 2x" alt="Scones taste amazing">

srcset 及 sizes 聯合切換

<img srcset="scones-small.jpg 450w, scones-medium.jpg 900w"
sizes="(min-width: 17em) 100vw, (min-width: 40em) 50vw" src="sconessmall.
jpg" alt="Scones">

HTML5 的新語義元素

**main 元素：**使用 main 標籤來聲明主內容區
- “文檔的主內容指的是文檔中特有的內容，導航鏈接、版權信息、站點標誌、廣告
  和搜索表單等多個文檔中重複出現的內容不算主內容（除非網頁或文檔的主要內容就是
  搜索表單）。”
section 元素：section 元素用於定義文檔或應用中一個通用的區塊。
- 在開發Web應用時，我一般會用 section 包裝可見組件。
nav 元素：
元素用於包裝指向其他頁面或同一頁面中不同部分的主導航鏈接。但它不一定非要用在頁腳中（雖然用在頁腳中是可以的）；頁腳中經常會包含頁面共用的導航。
如果你通常使用無序列表（
- ）來寫導航，那最好改成用 nav 嵌套
  多個 a 標籤。
article 元素：
用於包含一個獨立的內容塊
- 明顯可以放到 article 元素中的內容有博客正文和新聞報道。
- 內部的
  應該與外部
  相關
aside 元素：

元素用於包含與其旁邊內容不相關的內容。實踐當中，我經常用它包裝側邊欄（在內容適當的情況下）。這個元素也適合包裝突出引用、廣告和導航元素。基本上任何與主內容無直接關係的，都可以放在這裏邊。
<figure> 和 <figcaption> 元素
- 與
  相關的規範原文如下：
  “……因此可用於包含註解、圖示、照片、代碼，等等。”

<figure class="MoneyShot">
	<img class="MoneyShotImg" src="img/scones.jpg" alt="Incrediblescones" />
    <figcaption class="ImageCaption">Incredible scones, picture from
    Wikipedia</figcaption>
</figure>

這裏用
元素包裝了一個小小的獨立區塊。在它裏面，又使用
提供
了父 figure 元素的標題。
<detail> 和 <summary> 元素
- 你是不是常常想在頁面中添加一個“展開”/“收起”部件？
<header> 元素
- 實踐中，可以將
  元素用在站點頁頭作爲“報頭”，或者在
  元素中用作
  某個區塊的引介區。它可以在一個頁面中出現多次（比如頁面中每個中都可以有一
  個
  ）。
<footer> 元素
- <footer> 元素應該用於在相應區塊中包含與區塊相關的內容，可以包含指向其他文檔的鏈
  接，或者版權聲明。與 <header> 一樣，
  同樣可以在頁面中出現多次。比如，可以用它
  作爲博客的頁腳，同時用它包含文章正文的末尾部分。不過，規範裏說了，作者的聯繫信息應該
  放在
  元素中。
address 元素
- <address> 元素明顯用於標記聯繫人信息，爲最接近的
  或所用。不過有
  一點不好理解，它並不是爲包含郵政地址準備的（除非該地址確實是相關內容的聯繫地址）。郵
  政地址以及其他聯繫信息應該放在傳統的
  標籤裏。
h1 到 h6
- “ h1 到 h6 元素不能用於標記副標題、字幕、廣告語，除非想把它們用作新區塊或子
  區塊的標題。”
b 元素
- \“ 元素表示只爲引人注意而標記的文本，不傳達更多的重要性信息，也不用於
  表達其他的願望或情緒。比如，不用於文章摘要中的關鍵詞、評測當中的產品名、交互
  式文本程序中的可執行命令，等等。”
em 元素
- \ em 元素表示內容中需要強調的部分。
i 元素
- “一段文本，用於表示另一種願望或情緒，或者以突出不同文本形式的方式表達偏
  離正文的意思。”

元信息

所謂元信息，是指描述自身的信息，元信息類標籤，就是HTML用於描述文檔自身的一類標籤，它們通常出現在head標籤中，一般都不會在頁面被顯示出來（與此相對，其它標籤，如語義類標籤，描述的是業務）

元信息多數情況下是給瀏覽器、搜索引擎等機器閱讀的，有時候這些信息會在頁面之外顯示給用戶，有時候則不會。

head標籤

首先我們先來了解一下head標籤，head標籤本身並不攜帶任何信息，它主要是作爲盛放其它語義類標籤的容器使用。

head標籤規定了自身必須是html標籤中的第一個標籤，它的內容必須包含一個title，並且最多隻能包含一個base。如果文檔作爲iframe，或者有其他方式指定了文檔標題時，可以允許不包含title標籤。

title 標籤

title標籤表示文檔的標題，從字面上就非常容易理解。

表示標題的標籤： h1 – h6 和 title 之間的區別

title作爲元信息，可能會被用在瀏覽器收藏夾、微信推送卡片、微博等各種場景，這時侯往往是上下文缺失的，所以title應該是完整地概括整個網頁內容的。

而h1則僅僅用於頁面展示，它可以默認具有上下文，並且有鏈接輔助，所以可以簡寫，即便無法概括全文，也不會有很大的影響。

meta 標籤

meta 標籤是一組鍵值對，他是一種通用的元信息表示標籤

在head中可以出現任意多個meta標籤。一般的meta標籤由name和content兩個屬性來定義。name表示元信息的名，content則用於表示元信息的值。

具有charset屬性的meta

從HTML5開始，爲了簡化寫法，meta標籤新增了charset屬性。添加了charset屬性的meta標籤無需再有name和content。

charset型meta標籤非常關鍵，它描述了HTML文檔自身的編碼形式。因此，我建議這個標籤放在head的第一個。

<html>
<head>
<meta charset="UTF-8">
……

這樣，瀏覽器讀到這個標籤之前，處理的所有字符都是ASCII字符，衆所周知，ASCII字符是UTF-8和絕大多數字符編碼的子集，所以，在讀到meta之前，瀏覽器把文檔理解多數編碼格式都不會出錯，這樣可以最大限度地保證不出現亂碼。

一般情況下，http服務端會通過http頭來指定正確的編碼方式，但是有些特殊的情況如使用file協議打開一個HTML文件，則沒有http頭，這種時候，charset meta就非常重要了。

具有http-equiv屬性的meta

具有http-equiv屬性的meta標籤，表示執行一個命令，這樣的meta標籤可以不需要name屬性了。

例如，下面一段代碼，相當於添加了content-type這個http頭，並且指定了http編碼方式。

除了content-type，還有以下幾種命令：

content-language 指定內容的語言；
default-style 指定默認樣式表；
refresh 刷新；
set-cookie 模擬http頭set-cookie，設置cookie；
x-ua-compatible 模擬http頭x-ua-compatible，聲明ua兼容性；
content-security-policy 模擬http頭content-security-policy，聲明內容安全策略。

name爲viewport的meta

實際上，meta標籤可以被自由定義，只要寫入和讀取的雙方約定好name和content的格式就可以了。

我們來介紹一個meta類型，它沒有在HTML標準中定義，卻是移動端開發的事實標準：它就是name爲viewport的meta。

這類meta的name屬性爲viewport，它的content是一個複雜結構，是用逗號分隔的鍵值對，鍵值對的格式是key=value。

例如：

這裏只指定了兩個屬性，寬度和縮放，實際上viewport能控制的更多，它能表示的全部屬性如下：

width：頁面寬度，可以取值具體的數字，也可以是device-width，表示跟設備寬度相等。
height：頁面高度，可以取值具體的數字，也可以是device-height，表示跟設備高度相等。
initial-scale：初始縮放比例。
minimum-scale：最小縮放比例。
maximum-scale：最大縮放比例。
user-scalable：是否允許用戶縮放。
對於已經做好了移動端適配的網頁，應該把用戶縮放功能禁止掉，寬度設爲設備寬度，一個標準的meta如下：

其它預定義的meta

在HTML標準中，還定義了一批meta標籤的name，可以視爲一種有約定的meta，我在這裏列出來，你可以簡單瞭解一下。

application-name：如果頁面是Web application，用這個標籤表示應用名稱。

author: 頁面作者。
description：頁面描述，這個屬性可能被用於搜索引擎或者其它場合。
generator: 生成頁面所使用的工具，主要用於可視化編輯器，如果是手寫HTML的網頁，不需要加這個meta。
keywords: 頁面關鍵字，對於SEO場景非常關鍵。
referrer: 跳轉策略，是一種安全考量。
theme-color: 頁面風格顏色，實際並不會影響頁面，但是瀏覽器可能據此調整頁面之外的UI（如窗口邊框或者tab的顏色）。

所支持的設備
Bootstrap 的響應式設計可以讓你在不同的設備和屏幕尺寸上看起來更合適一些，這個響應式設計的 CSS 代碼會放在一個文件裏。下面是包含的東西：

標籤佈局寬度欄寬間隔
大屏幕顯示 1200px 以上 70px 30px
默認 980px 以上 60px 20px
垂直平板 768px 及以上 42px 20px
智能手機到平板電腦 767px 及以下流動欄，不固定寬度
電話 480px 及以下流動欄，不固定寬度

/* Large desktop */
@media (min-width: 1200px) { ... }
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }
 
/* Landscape phones and down */
@media (max-width: 480px) { ... }

響應式 Web 設計（一）佈局 及其 標籤語義化

響應式 Web 設計

響應式Web

設計思路

媒體查詢

使用媒體查詢鏈接不同的 CSS 文件

分隔媒體查詢的利弊

組合媒體查詢還是把它們寫在需要的地方

彈性佈局與響應式圖片

既有佈局技術，比如行內塊、浮動以及表格的缺點

行內塊與空白

浮動

Flexbox 概述

使用 Flexbox

Flexbox有4個關鍵特性：方向、對齊、次序和彈性

Flexbox 的對齊

交叉軸的對齊

justify-content

響應式圖片

通過 srcset 切換分辨率

srcset 及 sizes 聯合切換

HTML5 的新語義元素

nav 元素 ：

<figure> 和 <figcaption> 元素

<detail> 和 <summary> 元素

<header> 元素

<footer> 元素

address 元素

h1 到 h6

b 元素

em 元素

i 元素

元信息