隨著移動端用戶的增加，我們希望設計出來的網頁能同時使用PC和移動端設備，同一個網頁增對不同的設備顯示效果也不一樣，這時需要用到響應式設計。這里我先介紹一下流式網格系統。如果了解過 Bootstrap和Foundation框架的讀者就能發現這兩個框架都提供了獨特的網格系統。但是我們一般不會只為了使用網格系統而引入某一個框架，因此這里介紹一下如何根據自己需求設計一個流式網格系統。
為了網頁能根據設備自由縮放，在 /</head> 元素中添加以下 /</meta> 標簽:
復制代碼代碼如下:<meta name=”viewport” content=”width=device-width, initial-scale=1.0″/>
•width 屬性控制設備的寬度。假設您的網站將被帶有不同屏幕分辨率的設備瀏覽，那么將它設置為 device-width 可以確保它能正確呈現在不同設備上。
•initial-scale=1.0 確保網頁加載時，以 1:1 的比例呈現，不會有任何的縮放。在移動設備瀏覽器上，通過為 viewport meta 標簽添加 user-scalable=no 可以禁用其縮放（zooming）功能。通常情況下，maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能后，用戶只能滾動屏幕。
@media查詢
@media 查詢是CSS3的語法規則。使用@media 查詢可以針對不同的媒體類型定義不同的樣式，另外可以針對不同的屏幕尺寸設置不同的樣式。@media的CSS語法規則如下：
CSS Code復制內容到剪貼板
@media mediatype and|not|only (media feature) {
CSS-Code;
}
例如：
CSS Code復制內容到剪貼板
@media only screen and (max-width: 400px){
body {
background-color:lightblue;
}
}
表示只在媒體類型是數字屏幕而且寬度為400px或者更小時，則修改背景演示(background-color)。
另外我們也可以通過@media針對不同的媒體使用不同 stylesheets :
復制代碼代碼如下:<link rel=”stylesheet” media=”mediatype and|not|only (media feature)” href=”mystylesheet.css”>
構造網格
需求描述：設計一個網格系統，在PC端顯示1行8列，而在手機端顯示2行4列
HTML代碼如下：
XML/HTML Code復制內容到剪貼板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
新聞熱點
疑難解答
