響應式Web之流式網格系統
阿新 • • 發佈：2019-02-15
隨著移動端使用者的增加，我們希望設計出來的網頁能同時使用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語法規則如下：
@media mediatype and|not|only (media feature) {
CSS-Code;
}例如：
@media only screen and (max-width: 400px){
body {
background-color:lightblue;
}
}表示只在媒體型別是數字螢幕而且寬度為400px或者更小時，則修改背景演示(background-color)。
另外我們也可以通過@media針對不同的媒體使用不同 stylesheets :
<link rel="stylesheet" media 構造網格
需求描述：設計一個網格系統，在PC端顯示1行8列，而在手機端顯示2行4列
HTML程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<div class="row">
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
<div class="grid m-grid-1 d-grid-1">
</div>
</div>
</body>
</html>CSS程式碼如下：
.row{
width:100%;
max-width:1024px; /*設定最大的寬度，一般為PC端才起作用*/
margin:0 auto;
outline: 1px solid blue;
}
/*為row類清除浮動來防止由浮動元素造成的外邊距摺疊*/
.row:before,.row:after {content: " ";display: table;}
.row:after {clear: both;}
/*設定每一列的格式*/
.grid{
height:20px;
float:left;
margin:1%;
outline:1px solid red;
}
/*設定每一個移動裝置上m-grid-1類的寬度值，m-grid-2類為m-grid-1的兩倍，以此類推*/
.m-grid-1{width:23%;}
.m-grid-2{width:48%;}
.m-grid-3{width:73%;}
.m-grid-4{width:98%;}
/*為寬度大於或等於960px的裝置設定列的寬度*/
@media (min-width:960px){
.d-grid-1{width:10.5%;}
.d-grid-2{width:23%;}
.d-grid-3{width:35.5%;}
.d-grid-4{width:48%;}
.d-grid-5{width:60.5%;}
.d-grid-6{width:73%;}
.d-grid-7{width:85.5%;}
.d-grid-8{width:98%;}
}在PC 端顯示結果如下：
在手機端顯示如下：
