CSS響應式設計基礎
阿新 • • 發佈：2018-11-07
響應式 Web 設計 - Viewport
什麼是 Viewport? viewport 是使用者網頁的可視區域。 viewport 翻譯為中文可以叫做"視區"。 手機瀏覽器是把頁面放在一個虛擬的"視窗"（viewport）中，通常這個虛擬的"視窗"（viewport）比螢幕寬，這樣就不用把每個網頁擠到很小的視窗中（這樣會破壞沒有針對手機瀏覽器優化的網頁的佈局），使用者可以通過平移和縮放來看網頁的不同部分。 設定 Viewport <meta name="viewport" content="width=device-width, initial-scale=1.0"> width：控制 viewport 的大小，可以指定的一個值，如 600，或者特殊的值，如 device-width 為裝置的寬度（單位為縮放為 100% 時的 CSS 的畫素）。 height：和 width 相對應，指定高度。 initial-scale：初始縮放比例，也即是當頁面第一次 load 的時候縮放比例。 maximum-scale：允許使用者縮放到的最大比例。 minimum-scale：允許使用者縮放到的最小比例。 user-scalable：使用者是否可以手動縮放。
響應式 Web 設計 - 網格檢視
使用網格檢視有助於我們設計網頁。這讓我們向網頁新增元素變的更簡單。
響應式網格檢視通常是 12 列，寬度為100%，在瀏覽器視窗大小調整時會自動伸縮。
建立響應式網格檢視
首先確保所有的 HTML 元素都有 box-sizing 屬性且設定為 border-box。
確保邊距和邊框包含在元素的寬度和高度間。
* {
box-sizing: border-box;
}
示例： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>CSS響應式</title> <style> * { box-sizing: border-box; } .row:after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 15px; } .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color :#33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; } </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="row"> <div class="col-3 menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="col-9"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> <p>Resize the browser window to see how the content respond to the resizing.</p> </div> </div> </body> </html>
響應式 Web 設計 - 媒體查詢
使用 @media 查詢，你可以針對不同的媒體型別定義不同的樣式。
如果瀏覽器視窗小於 500px, 背景將變為淺藍色：
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
示例： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title>CSS媒體查詢</title> <style> * { box-sizing: border-box; } .row:after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 15px; } html { font-family: "Lucida Sans", sans-serif; } .header { background-color: #9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none; margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px; background-color :#33b5e5; color: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover { background-color: #0099cc; } .aside { background-color: #33b5e5; padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .footer { background-color: #0099cc; color: #ffffff; text-align: center; font-size: 12px; padding: 15px; } /* For mobile phones: */ [class*="col-"] { width: 100%; } @media only screen and (min-width: 600px) { /* For tablets: */ .col-m-12 {width: 8.33%;} .col-m-2 {width: 16.66%;} .col-m-3 {width: 25%;} .col-m-4 {width: 33.33%;} .col-m-5 {width: 41.66%;} .col-m-6 {width: 50%;} .col-m-7 {width: 58.33%;} .col-m-8 {width: 66.66%;} .col-m-9 {width: 75%;} .col-m-10 {width: 83.33%;} .col-m-11 {width: 91.66%;} .col-m-12 {width: 100%;} } @media only screen and (min-width: 768px) { /* For desktop: */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} } </style> </head> <body> <div class="header"> <h1>Chania</h1> </div> <div class="row"> <div class="col-3 col-m-3 menu"> <ul> <li>The Flight</li> <li>The City</li> <li>The Island</li> <li>The Food</li> </ul> </div> <div class="col-6 col-m-9"> <h1>The City</h1> <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> </div> <div class="col-3 col-m-12"> <div class="aside"> <h2>What?</h2> <p>Chania is a city on the island of Crete.</p> <h2>Where?</h2> <p>Crete is a Greek island in the Mediterranean Sea.</p> <h2>How?</h2> <p>You can reach Chania airport from all over Europe.</p> </div> </div> </div> <div class="footer"> <p>Resize the browser window to see how the content respond to the resizing.</p> </div> </body> </html>
方向：橫屏/豎屏
結合CSS媒體查詢,可以建立適應不同裝置的方向(橫屏landscape、豎屏portrait等)的佈局。
語法：
orientation：portrait | landscape
portrait：指定輸出裝置中的頁面可見區域高度大於或等於寬度
landscape： 除portrait值情況外，都是landscape
如果是橫屏背景將是淺藍色：
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}響應式 Web 設計 - 圖片
使用 width 屬性
如果 width 屬性設定為 100%，圖片會根據上下範圍實現響應式功能：
img {
width: 100%;
height: auto;
}
使用 max-width 屬性
如果 max-width 屬性設定為 100%, 圖片永遠不會大於其原始大小：
img {
max-width: 100%;
height: auto;
}
背景圖片可以響應調整大小或縮放。
以下是三個不同的方法：
1. 如果 background-size 屬性設定為 "contain", 背景圖片將按比例自適應內容區域。圖片保持其比例不變：
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
}
2. 如果 background-size 屬性設定為 "100% 100%" ，背景圖片將延展覆蓋整個區域：
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. 如果 background-size 屬性設定為 "cover"，則會把背景影象擴充套件至足夠大，以使背景影象完全覆蓋背景區域。注意該屬性保持了圖片的比例因此 背景影象的某些部分無法顯示在背景定位區域中。
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
不同裝置顯示不同圖片
大尺寸圖片可以顯示在大螢幕上，但在小螢幕上確不能很好顯示。我們沒有必要在小螢幕上去載入大圖片，這樣很影響載入速度。所以我們可以使用媒體查詢，根據不同的裝置顯示不同的圖片。
例項
/* For width smaller than 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}
你可以使用媒體查詢的 min-device-width 替代 min-width 屬性，它將檢測的是裝置寬度而不是瀏覽器寬度。瀏覽器大小重置時，圖片大小不會改變。
/* 裝置小於 400px: */
body {
background-image: url('img_smallflower.jpg');
}
/* 裝置大於 400px (也等於): */
@media only screen and (min-device-width: 400px) {
body {
background-image: url('img_flowers.jpg');
}
}HTML5 的 <picture> 元素可以設定多張圖片。
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers">
</picture>
srcset 屬性的必須的，定義了圖片資源。
media 屬性是可選的，可以在媒體查詢的 CSS @media 規則 檢視詳情。
對於不支援 <picture> 元素的瀏覽器你也可以定義 <img> 元素來替代。響應式 Web 設計 - 視訊(Video)
使用 width 屬性
如果 width 屬性設定為 100%，視訊播放器會根據螢幕大小自動調整比例：
例項
video {
width: 100%;
height: auto;
}
注意在以上例項中，視訊播放器根據螢幕大小自動調整比例，且可以比原始尺寸大。更多情況下我們可以使用 max-width 屬性來替代。
使用 max-width 屬性
如果 max-width 屬性設定為 100%, 視訊播放器會根據螢幕自動調整比例，但不會超過其原始大小：
例項
video {
max-width: 100%;
height: auto;
}
在網頁中新增視訊
我們可以在網頁中新增視訊。以下例項視訊根據 div 區域大小自動調整並佔滿整個 div 區域：
例項
video {
width: 100%;
height: auto;
}響應式 Web 設計 - 框架
本章節為大家介紹響應式 Web 設計框架 Bootstrap。
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>我的第一個 Bootstrap 頁面</h1>
</div>
<div class="row">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
</div>
</body>
</html>