摘要：搭建添加媒體查詢標簽添加標簽嵌入標簽嵌入因為性能的原因，應該避免使用間斷點的選取彈性常見響應模式序號模式圖解大體流動模型掉落列模型活動布局模型畫布溢出模型有時一個網頁同時結合幾種模式，例如掉落列和畫布溢出模型。

chrome 瀏覽器設置

在 chrome 瀏覽器中打開 chrome://inspect

手機設置

打開開發者模式

打開 USB 調試模式

打開手機端 chrome 瀏覽器

視窗是指瀏覽器能夠顯示內容的區域。

瀏覽器并不是物理硬件的像素寬度而工作的，而是根據 DIPs 寬度。DIPs (device independent pixels)，與設備無關的像素值。DIPs 將像素值與實際距離聯系起來。不論顯示器的像素密度是多少，同一 DIPs 值表示屏幕上同樣大小的空間。

在屏幕較小的移動設備上顯示網頁時，瀏覽器為了讓內容看上去更好一些，會開啟字體改善機制。瀏覽器會試圖挑出頁面中的首要內容，并把它們放大。也就是說有的字體會變大，這易于閱讀，但是其它字體還是會一樣小，非常難看清。

DPR (device pixel ratio)，設備像素比。DPR = hardware pixels / DIPs，即設備像素比 = 物理像素 / 相對像素。記住，像素比是一維數字比，而不是二維的數字比。

下面計算每個圖代表的 DRP：

其中，每個藍色格子代表一個物理像素，一個橘色方框代表一個相對像素。

答案：

1圖,一個實際像素點表示一個相對像素，DPR=1；

2圖,每行的兩個實際像素點表示一個相對像素，DPR=2；

3圖,三個實際像素點表示一個相對像素，DPR=3；

4圖,一又二分之一個實際像素點表示一個相對像素，DPR=1.5；

為 head 元素添加 viewport 標簽可以讓瀏覽器知道我們的意圖，我們需要在視窗值后面設置頁面寬度來指導頁面針對具體設備進行寬度調整，這使頁面可以匹配不同屏幕尺寸。

初始縮放比例設置為 1，使瀏覽器相對像素與 CSS 像素的比例是一比一。如果不把初始縮放比例設為 1 的話，有的瀏覽器會在切換為橫屏模式時依舊保持之前的頁面寬度，而且它們的內容只是進行縮放，而無法自動調整布局。

設置元素的最大寬度來防止溢出。

CSS

img, embed,
object, video {
  max-width: 100%;
}

我們的手指大約有 10mm 寬，差不多等于 40px CSS 像素。所以，按鈕至少應該設置為 40 * 40px，但是與其設置那么大，更不如設置為 48 * 48px。這樣能確保元素之間有足夠的距離，以及那些手指更粗的人也能使用無礙。有些敲擊目標可以設置更小一些，但是請確保任何兩個敲擊目標之間至少有 40px 的距離，這樣能防止用戶同時點擊到兩個按鈕或者完全看不到按鈕。

設計從最小的屏幕做起，我們就必須仔細權衡對用戶最重要的信息，什么事情是用戶最想做的，或者什么是用戶最希望在屏幕上看到的？

如果是從最大的屏幕開始設計，一些重要的信息很可能會被輕易刪掉。相反，明確內容的優先級，然后從小到大的設計，最重要的內容永遠都會留在頁面上。無論用戶使用什么樣的設備，都能得到最完整的體驗。

比如一個賣硬件的商店的設計，優先考慮的信息是最近商店的地址、營業時間和聯系方式，把這些信息放在頁面頂部可以讓我更好的看到。

除了從小到大的設計，代碼編寫最好也是從小到大的，這樣就能知道主要風格和布局是否能夠兼容任何設備，甚至是古老的不支持媒體查詢的瀏覽器。但是最好的理由是性能，如果從最小的設備開始，就必須一開始就去考慮性能的問題，需要我們有意識的去做一些決定來確定內容優先級以及要為用戶提供多少信息。

link 標簽添加

@media 標簽嵌入

@media screen and (min-width: 500px) {
body { background: blue; }
}

@import 標簽嵌入

@import url("no.css") only screen and (min-width:500px);
/* 因為性能的原因，應該避免使用@import */

有時一個網頁同時結合幾種模式，例如掉落列和畫布溢出模型。

首先要介紹的掉落列可能是最簡單的，在視窗最窄的時候，每個元素都縱向堆放，一個落一個。當視窗變寬，元素也隨之擴展，直到到達第一個間斷點。

在第一個間斷點，所有元素不再豎直堆放，而是前兩個元素并排顯示，第三個元素在它們下面。這些元素會繼續隨著視窗而延展，直到到達下一個間斷點。

接著，它們會重排列成一個三列的布局。通常，當視窗達到最大寬度，列也達到最大寬度。然后，它們便不會隨視窗延展，而是在兩側添加外邊距。

代碼示例：

HTML

CSS

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 100%;
}

/* 第一個間斷點 */
@media screen and (min-width: 450px) {
  .dark_blue {
    width: 25%;
  }
  .light_blue {
    width: 75%;
  }
}

/* 第二個間斷點 */
@media screen and (min-width: 550px) {
  .dark_blue,
  .green {
    width: 25%;
  }
  .light_blue {
    width: 50%;
  }
}
/* 第三個間斷點 */
@media screen and (min-width: 700px) {
  .container {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}

大體流動模型與掉落列模型非常相似，但是它更像網格系統，它有更多的列，而且列的響應方式也不相同，這要取決于視窗寬度。

在視窗寬度最窄時，與掉落列模型一樣，為豎直堆放布局。但是隨著視窗變寬，網絡模型開始出現。最終，當視窗達到最大寬度，兩邊會出現外邊距，而內容不再延展。

代碼示例：

HTML

CSS

.container {
  display: flex;
  flex-wrap: flex;
}

.box {
  width: 100%;
}

/* 第一個間斷點 */
@media screen and (min-width: 450px) {
  .dark_blue,
  .green {
    width: 50%;
  }
}

/* 第二個間斷點 */
@media screen and (min-width: 500px) {
  .dark_blue,
  .light_blue {
    width: 50%;
  }
  .green,
  .red,
  .orange {
    width: 33.333333%;
  }
}

/* 第三個間斷點 */
@media screen and (min-width: 700px) {
  .container {
    width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
}

活動布局模型應該是最靈活的響應式模型了，它有很多適用于不同設備的間斷點。但最關鍵的是它的布局變換方式，并不是單純的重排列到其它列的下方。flexbox的亮點在這才真正凸顯，因為我們可以利用css order屬性。

代碼示例：

HTML

CSS

.container {
  width: 100%;
  display: flex;
  flex-wrap: flex;
}

.box {
  width: 100%;
}

/* 第一個間斷點 */
@media screen and (min-width: 500px) {
  .dark_blue {
    width: 50%;
  }
  #container2 {
    width: 50%;
  }
}

/* 第二個間斷點 */
@media screen and (min-width: 600px) {
  .dark_blue {
    width: 25%;
    order: 1;
  }
  #container2 {
    width: 50%;
  }
  .red {
    width: 25%;
    order: -1;
  }
}

在畫布溢出模型中，內容并不是豎直堆放的，而是將不常用的內容，比如導航欄或者應用菜單放在屏幕以外，只有當屏幕足夠大的時候才顯示出來。在小尺寸屏幕上，溢出畫布的內容通常會在用戶點擊菜單按鈕時出現。

代碼示例：

HTML

  ...

CSS

html, body, main {
  height: 100%;
  width: 100%;
}

nav {
  width: 300px;
  height: 100%;
  position: absolute;
  transform: translate(-300px, 0);
  transition: transform 0.3s ease;
}

nav.open {
  transform: translate(0, 0);
}

/* 第一個間斷點 */
@media screen and (min-width: 600px) {
  nav {
    position: relative;
    transform: translate(0, 0);
  }
  body {
    display: flex;
    flex-flow: row nowrap;
  }
  main {
    width: auto;
    flex-grow: 1;
  }
}

JavaScript

menu.addEventListener("click", function (e) {
  drawer.classList.toggle("open");
  e.stopPropagation();
});

當視窗尺寸縮小時，隱藏列實質上是根據它們的重要性來進行的。在較小屏幕上選擇隱藏某些內容來達到我們的目的。

用“不再有表格”技術，當視窗寬度小于一定值，表格會瓦解重組成長列表。與數據表不同，這種技術的好處是所有的數據都是可見的，不管視窗的尺寸是多大。

在一個較寬的窗口時，所有東西都正常顯示。但是當視窗縮小，表格瓦解，每個縱列實際上變成獨立一行，表頭在旁邊。使用媒體查詢，需要告訴表格當視窗小于一定寬度，讓表格不再顯示為“表格”。在媒體查詢里，強制所有的 table、thead、tbody、tr、th、td 執行塊級顯示

代碼示例：

HTML

...

  

  

    

      
...
      
...
      
...
      
...
      
...
      
...
      
...
      
...
    
  

CSS

@media screen and (max-width: 500px) {
  table, thead, tbody, tr, th, td {
    display: block;
  }
  thead tr {  /* 對屏幕閱讀器友好 */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  td {
    position: relative;
    padding-left: 50%;
  }
  td:before {
    position: absolute;
    left: 6px;
    content: attr(data-th);
    font-weight: bold;
  }
}

為了把表格放在視窗里，可以做的最簡單的事情是把它放在一個 div 里面，然后設置寬度為 100%，溢出滾動。

代碼示例：

HTML

  
      ...
    

    

      
Team
      
1st
      
2nd
      
3rd
      
4th
      
5th
  

CSS

div.contained_table {
  width: 100%;
  overflow-x: auto;
}

在閱讀是，一行文字太少或太多都是不合理的。因此，行的長度是在建立網站時的重要參考因素，這也是在選擇斷點的時候經常要拿來參考的。使字體足夠大以適應不同設備的閱讀效果是很重要的。建議基本字體設置至少 16px，行高至少有 1.2em。根據具體情況，可以在文本很多的網站增加更多行高。

記住，合適的字體可以使閱讀體驗提升很多。

除了選擇主要斷點，就是布局顯著改變的地方，增加副斷點來實現一些小的改變也是很有幫助的。例如，在主要斷點之間調整元素的外邊距和內邊距可能是很有幫助的。或者給一些內容增加字號會更容易閱讀，而且布局上會感到更自然。

好了，就是這樣！