《實用技巧》——讓你的網站變成響應式的3個簡單步驟
1 – 佈局
當建立一個響應式網站，或讓現有的網站變成響應式的，首先要關注的元素的佈局。我在建立響應式的網站，總是先建立一個非響應的佈局，頁面寬度固定大小。如果非響應版本完成得非常不錯，我再新增媒體查詢（Media Queries）和響應式程式碼。這種操作方式更容易實現響應式特性，在同一時間專注於一個任務。
當你已經完成了無響應的網站，做的第一件事是在你的 HTML 頁面，貼上下面的程式碼到<head>和</head>標籤之間。這將設定螢幕按1：1的尺寸顯示，在 iPhone 和其他智慧手機的瀏覽器提供網站全檢視瀏覽，並禁止使用者縮放頁面。
?| 1 2 3 |
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible"
content="IE=edge,chrome=1">
<meta name="HandheldFriendly"
content="true">
|
現在是時候新增一些媒體查詢了。根據 W3C 網站，媒體查詢由媒體型別和零個或多個媒體查詢的條件表示式組成。通過使用媒體查詢，外觀呈現可以針對特定範圍內的輸出裝置，而不需要改變內容本身。換句話說，媒體查詢讓您的網站在各種各種顯示器上看起來都很好，從小的智慧手機到大的電腦螢幕等等。
媒體查詢取決於你的網站佈局，所以對我來說為您提供一個現成可以使用的程式碼片段有點困難。但是，下面的程式碼對於大多數網站都是一個很好的起點。在這個例子中，#primary 是主要內容區域，#secondary 是側欄。
從程式碼中你可以看到，我定義了兩種規格：首先有一個最大寬度為1060px，為平板電腦優化的橫向顯示。#primary 佔在其父容器寬度的67%，#senondary 佔30%，再加上3%的左外邊距。 第二個規格是用於平板電腦和更小的螢幕尺寸。
由於智慧手機的螢幕尺寸小，我決定給 #primary 設定100%的寬度，#secondary 也設定100%的寬度，他將在 #primary 下面。 正如我已經說過的，你可能必須要對這段程式碼位進行修改才能適應您的網站的具體需求。
| 1 2 3 4 5 6 7 8 9 10 11 |
/* Tablet Landscape */
@media screen
and (max-width:
1060px) {
#primary {
width:67%; }
#secondary {
width:30%;
margin-left:3%;}
}
/* Tabled Portrait */
@media screen
and (max-width:
768px) {
#primary {
width:100%; }
#secondary {
width:100%;
margin:0;
border:none; }
}
|
完成以後，讓我們看看你的佈局是如何響應的。要做到這一點，我用這 Matt Kersley 建立的一款非常的響應式測試工具。
2 – 媒體
一個響應式的佈局是實現響應網站的第一步。現在，讓我們把注意力集中在另外一個現代化網站非常重要的方面：媒體，如視訊或影象。 下面的 CSS 程式碼將確保您的影象將永遠不會大於他們的父容器，程式碼非常簡單，適用於大多數網站。請注意，IE6 等舊的瀏覽器不支援 max-width 指令。
?| 1 |
img { max-width:
100%; }
|
雖然上述技術是有效的，有時你可能需要有更多的影象控制權，例如根據客戶端的顯示大小，顯示不同的影象。
?| 1 |
<img src="image.jpg"
data-src-600px="image-600px.jpg"
data-src-800px="image-800px.jpg"
alt="">
|
正如你可以看到，我們使用 data-* 屬性來儲存替換影象的 URL。現在，讓我們使用強大的 CSS3 來為匹配 min-device-width 條件的媒體指定替換影象：
?| 1 2 3 4 5 6 7 8 9 10 11 |
@media (min-device-width:600px) {
img[data-src-600px] {
content:
attr(data-src-600px,
url);
}
}
@media (min-device-width:800px) {
img[data-src-800px] {
content:
attr(data-src-800px,
url);
}
}
|
令人印象深刻，是不是？現在，讓我們來看看另一個在今天的網站中非常重要的媒體——視訊。由於大多數網站使用的視訊來自第三方網站，我決定把重點放在 Nick La 的彈性視訊技術，這種技術可讓您嵌入的響應式的視訊。
HTML：
?| 1 2 3 |
CSS：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.video-container {
position:
relative;
padding-bottom:
56.25%;
padding-top:
30px;
height:
0;
overflow:
hidden;
}
.video-container iframe,
.video-container object,
.video-container
embed {
position:
absolute;
top:
0;
left:
0;
width:
100%;
height:
100%;
}
|
在你的網站上應用了這些程式碼後，嵌入的視訊也是響應式（Responsive）的了。
3 – 字型
本教程的最後一步絕對非常重要，但往往被網站開發人員忽視——字型。到現在為止，大多數開發人員（包括我自己）使用畫素來定義字型的大小。雖然畫素在普通網站使用是OK的，但是對於響應式網站來說應該有響應式的字型。事實上，一個響應式的字型大小應關聯它的父容器的寬度，這樣它才可以適應客戶端的螢幕。
CSS3 規範引入了一個新的單位叫 rem，和 em 類相似，但相對於 HTML 元素來說， rem 更易於使用。
rem 是相對於 HTML 元素的，不要忘了重置 HTML 的字型大小：
?| 1 |
html { font-size:100%; }
|
完成後，您可以定義響應式的字型大小，如下所示：
?| 1 2 3 |
@media (min-width:
640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;}
}
@media (min-width:1100px) { body {font-size:1.5rem;}
}
|
請注意，舊瀏覽器不支援 rem 單元，所以不要忘了實現一個替代。
這就是今天的所有內容了，希望你會喜歡這個教程！記得推薦和分享啊！