響應式佈局

響應式佈局

前言

早在2010年，設計人員和開發人員就開始實踐“響應網頁設計”(RWD):

隨著網路裝置尺寸千變萬化，為了達到相同的體驗，通常的做法是剪下不相關的設計。實際上，我們可以讓我們的設計更好的適應渲染螢幕。

一. 什麼是響應式

響應式網頁設計就是一個網站能夠相容多個終端，而不是為每個終端做一個特定的版本。

打個比方來說：現在社會有很多響應產品，例如摺疊沙發，摺疊床等等，

在專案中你會遇到不同的終端，由於終端解析度不同，所以你要想讓使用者體驗更好，就必要讓你的頁面能夠相容多個終端。

響應式Web設計可以讓一個網站同時適配多種裝置和多個螢幕，可以讓網站的佈局和功能隨使用者的使用環境（螢幕大小、輸入方式、裝置/瀏覽器能力）而變化

二. 響應式的三個特徵

1.媒體查詢

“媒體查詢不是針對某些裝置，而是檢查裝置在渲染我們作品時的物理特性,”

媒體允許開發人員基於使用者的裝置的屬性使用條件檢查改變網頁設計。

2.流動佈局

無論使用者使用的是21寸桌面計算機、13英寸膝上型電腦、9.7英寸的平板電腦、或5.5英寸的手機，使用CSS建立靈活的網格時，列自動重新調整自己以適應螢幕的大小或瀏覽器視窗。

“流體佈局就是將設計的主控權放在使用者和他們的瀏覽習慣裡”

這使得設計師能夠跨多個裝置保持一致的外觀和感覺。另外，它可以節省大家的時間和金錢允許設計師來更新網站的一個版本或多個版本。

3.靈活的視覺效果

鑑於有超過8.48
B獨特的裝置存在的今天，此功能允許團隊建立適於任何裝置永不過時的設計，不管其大小或形狀。

三. 什麼時候用到響應式

• 小型的專案或需求頁PC端和移動端共用一套

• 大型的專案PC端（固定佈局）和移動端（移動適配）各用一套

四. 媒體查詢

1.為什麼響應式 Web 設計需要媒體查詢

在媒體查詢出現之前，針對不同尺寸裝置的設計常常依靠JS或PHP等依靠userAgent來勉強實現，而現在自適應的響應式設計成為了家常便飯。

作為響應式佈局的核心技術之一，媒體查詢（media
query）提供了一種檢測裝置特徵的方法，它使開發者可以根據不同的裝置特徵應用不同樣式，為不同裝置建立合適的使用者體驗。

CSS3媒體查詢可以讓我們針對特定的裝置能力或條件為網頁應用特定的CSS樣式。如果沒有媒體查詢，光用CSS是無法大大修改網頁外觀的。

這個模組讓我們可以提前編寫出適應很多不可預測因素的CSS規則，比如螢幕方向水平或垂直、視口或大或小等等。

彈性佈局雖然可以讓設計適應較多場景，也包括某些尺寸的螢幕，但有時候確實不夠用，因為我們還需要對佈局進行更細緻的調整。媒體查詢讓這一切成為可能，它就相當於CSS中基本的條件邏輯。

2.css2中的媒體查詢

在CSS2中，媒體查詢只使用於style和link標籤中，以media屬性存在；media屬性用於為不同的媒介型別規定不同的樣式

<style media="screen,tv">
<link ref="stylesheet" href="demo.css" media="screen">

3.媒介型別

all           適合所有裝置
screen         計算機螢幕（預設值） 
print          列印預覽模式 / 列印頁   
tty            電傳打字機以及使用等寬字元網格的類似媒介
tv             電視型別裝置（低解析度、有限的螢幕翻滾能力）
projection     放映機
handheld       手持裝置（小螢幕、有限的頻寬）
braille        盲人用點字法反饋裝置
aural          語音合成器
<style media="screen,tv">
.box{
    : 100px;
    : 100px; 
    : lightblue;
}    
</style>
<div class="box"></div> 

4.媒體特徵

媒體查詢支援豐富的裝置特徵，除了我們最常看到的寬度和高度查詢，還有一些其他的媒體特徵比如方向、解析度等對檢測裝置也很有用，更多常用的媒體特徵詳細資訊可參考下表：

裝置特徵	取值	說明
width	長度數值，如600px	輸出裝置渲染區域（如可視區域的寬度或印表機紙盒的寬度）的寬度
height	長度數值，如600px	輸出裝置渲染區域（如可視區域的高度或印表機紙盒的高度）的高度
aspect-raido	整數或小數	viewport 寬高比，值為寬度/高度
orientation	portrait 或 landscape	裝置處於橫屏（寬度大於高度）模式還是豎屏（高度大於寬度）模式
resolution	數值	裝置解析度，如 300ppi
color	正整數	檢查裝置支援多少種顏色等
scan	progressive 或 interlace	輸出裝置的掃描方式，大部分現代螢幕使用 progressive 漸進式方式，部分等離子電視使用 interlace 隔行掃描
grid	0 或 1	判斷輸出裝置是網格裝置還是點陣圖裝置

另外，對於部分取值為數值的屬性，媒體查詢可以使用 min- 或 max-
字首表示範圍，這為媒體查詢提供了更方便的判斷方式。例如使用 max-width: 320px
表示裝置 viewport 的寬度小於等於 320px，min-width: 321px 表示 viewport
寬度大於等於 321px。

@media (: 320px) { 

5.邏輯條件

通過使用 and、not、only 等邏輯條件關鍵詞，可以組合多個媒體查詢條件。

and
@media (: 700px)  (: landscape) { ... }
上面的示例是寬度大於 700px 的媒體查詢條件，如果你只想在橫屏情況時使用這個條件，可以如下所示使用 and 操作符來合併媒體屬性。
not 和 only
使用 not 可以不在某種條件下使用當前媒體查詢規則，如以下示例中媒體查詢匹配 viewport 寬度大於 320px 且不是印表機的裝置。
可以用關鍵字not表示一個否定查詢；not必須置於查詢的一開頭並會對整條查詢串生效，除非逗號分割的多條

@media  print  (: 320px) { ... }

而使用 only 可以僅在某種條件下使用規則，如示例中僅在 viewport 寬度大於 320px 的螢幕裝置中使用。
@media  screen  (: 320px) { ... }

6.使用媒體查詢設定斷點

如何選擇網站內容的響應點，即如何選擇不同 viewport 的 min-width 和 max-width
的取值，我們稱為選擇斷點。在設計斷點時，可以從最小支援的螢幕寬度開始，逐漸增加螢幕寬度，覆蓋不同尺寸螢幕的體驗。斷點的設定主要取決於產品設計本身，沒有萬能媒體查詢的程式碼。但經過實踐，總結了一套比較具有代表性的裝置斷點，程式碼如下：

@media  screen  (: 600px) {...}

@media  screen  (: 600px) {...}

@media  screen  (: 768px) {...}

@media  screen  (: 992px) {...}

@media  screen  (: 1200px) {...}

7.Media Queries Level 4規範中新的媒體特性

update – 根據裝置的更新頻度區分其型別 (none 如印表機, slow 如電子墨水, fast 正常裝置)
scripting – none 不支援指令碼或未啟用 | initial-only 僅支援頁面初始化指令碼 | enabled 支援指令碼並且已啟用
pointer – 裝置互動的精度 (coarse不精確如手指, fine 精確如滑鼠, none 無指點)
hover – 裝置是否支援懸停狀態

8.CSS3的媒體查詢

• 媒體查詢最基本的形式，就是單獨或組合使用媒體型別和媒體特性(後者要置於括號中)，如

@media screen {
    body {
        : 20px;
    }
}

@media screen, print {
    body {
        : 20px;
    }
}

@media (: 30em) {
    nav li {
        : block;
    }
}

@media screen  (: 30em) {
    nav li {
        : block;
    }
}

• 引入外部檔案時的媒體查詢

<!--即使媒體查詢不符，樣式檔案總會被下載-->
<link rel="stylesheet" href="styles.css" 
    type="text/css" media="screen x-width

9.媒體查詢的巢狀

@media screen {
    @media (: 20em) {
        img {
            : block;
            : 100%;
            : auto;
        }
    }
    @media (: 40em) {
        img {
            : inline-block;
            : 300px;
        }
    } 
}

10.less書寫媒體查詢

*{
  : 0;
  : 0;
}

#box{
  : 200px;
  : 200px;
  : red;
  @media screen  (: 768px){
    background-color;
  }
}