《實用技巧》——讓你的網站變成響應式的3個簡單步驟

<a href="http://blog.51cto.com/lihongbo/1158086#">?</a>

1

2

3

<code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"viewport"</code> <code>content</code><code>=</code><code>"width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"X-UA-Compatible"</code> <code>content</code><code>=</code><code>"IE=edge,chrome=1"</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>name</code><code>=</code><code>"HandheldFriendly"</code> <code>content</code><code>=</code><code>"true"</code><code>&gt;</code>

　　現在是時候添加一些媒體查詢了。根據 W3C 網站，媒體查詢由媒體類型和零個或多個媒體查詢的條件表達式組成。通過使用媒體查詢，外觀呈現可以針對特定範圍内的輸出裝置，而不需要改變内容本身。換句話說，媒體查詢讓您的網站在各種各種顯示器上看起來都很好，從小的智能手機到大的電腦螢幕等等。

　　媒體查詢取決于你的網站布局，是以對我來說為您提供一個現成可以使用的代碼片段有點困難。但是，下面的代碼對于大多數網站都是一個很好的起點。在這個例子中，#primary 是主要内容區域，#secondary 是側欄。

　　從代碼中你可以看到，我定義了兩種規格：首先有一個最大寬度為1060px，為平闆電腦優化的橫向顯示。#primary 占在其父容器寬度的67%，#senondary 占30%，再加上3%的左外邊距。 第二個規格是用于平闆電腦和更小的螢幕尺寸。

　　由于智能手機的螢幕尺寸小，我決定給 #primary 設定100%的寬度，#secondary 也設定100%的寬度，他将在 #primary 下面。 正如我已經說過的，你可能必須要對這段代碼位進行修改才能适應您的網站的具體需求。

4

5

6

7

8

9

10

11

<code>/* Tablet Landscape */</code>

<code>@media </code><code>screen</code> <code>and (</code><code>max-width</code><code>: </code><code>1060px</code><code>) {</code>

<code>    </code><code>#primary { </code><code>width</code><code>:</code><code>67%</code><code>; }</code>

<code>    </code><code>#secondary { </code><code>width</code><code>:</code><code>30%</code><code>; </code><code>margin-left</code><code>:</code><code>3%</code><code>;} </code>

<code>}</code>

<code>/* Tabled Portrait */</code>

<code>@media </code><code>screen</code> <code>and (</code><code>max-width</code><code>: </code><code>768px</code><code>) {</code>

<code>    </code><code>#primary { </code><code>width</code><code>:</code><code>100%</code><code>; }</code>

<code>    </code><code>#secondary { </code><code>width</code><code>:</code><code>100%</code><code>; </code><code>margin</code><code>:</code><code>0</code><code>; </code><code>border</code><code>:</code><code>none</code><code>; }</code>

<code>img { </code><code>max-width</code><code>: </code><code>100%</code><code>; }</code>

　　雖然上述技術是有效的，有時你可能需要有更多的圖像控制權，例如根據用戶端的顯示大小，顯示不同的圖像。

<code>&lt;</code><code>img</code> <code>src</code><code>=</code><code>"image.jpg"</code> <code>data-src-600px</code><code>=</code><code>"image-600px.jpg"</code> <code>data-src-800px</code><code>=</code><code>"image-800px.jpg"</code> <code>alt</code><code>=</code><code>""</code><code>&gt;</code>

　　

<code>@media (min-device-</code><code>width</code><code>:</code><code>600px</code><code>) {</code>

<code>    </code><code>img[data-src</code><code>-600px</code><code>] {</code>

<code>        </code><code>content</code><code>: </code><code>attr</code><code>(data-src</code><code>-600px</code><code>, </code><code>url</code><code>);</code>

<code>    </code><code>}</code>

<code>@media (min-device-</code><code>width</code><code>:</code><code>800px</code><code>) {</code>

<code>    </code><code>img[data-src</code><code>-800px</code><code>] {</code>

<code>        </code><code>content</code><code>: </code><code>attr</code><code>(data-src</code><code>-800px</code><code>, </code><code>url</code><code>);</code>

　　HTML：

<code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"video-container"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>iframe</code> <code>src</code><code>=</code><code>"http://player.vimeo.com/video/6284199?title=0&amp;byline=0&amp;portrait=0"</code> <code>width</code><code>=</code><code>"800"</code> <code>height</code><code>=</code><code>"450"</code> <code>frameborder</code><code>=</code><code>"0"</code><code>&gt;&lt;/</code><code>iframe</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

　　CSS：

12

13

14

15

16

17

<code>.video-container {</code>

<code>    </code><code>position</code><code>: </code><code>relative</code><code>;</code>

<code>    </code><code>padding-bottom</code><code>: </code><code>56.25%</code><code>;</code>

<code>    </code><code>padding-top</code><code>: </code><code>30px</code><code>;</code>

<code>    </code><code>height</code><code>: </code><code>0</code><code>;</code>

<code>    </code><code>overflow</code><code>: </code><code>hidden</code><code>;</code>

<code>.video-container iframe, </code>

<code>.video-container object, </code>

<code>.video-container </code><code>embed</code> <code>{</code>

<code>    </code><code>position</code><code>: </code><code>absolute</code><code>;</code>

<code>    </code><code>top</code><code>: </code><code>0</code><code>;</code>

<code>    </code><code>left</code><code>: </code><code>0</code><code>;</code>

<code>    </code><code>width</code><code>: </code><code>100%</code><code>;</code>

<code>    </code><code>height</code><code>: </code><code>100%</code><code>;</code>

　　在你的網站上應用了這些代碼後，嵌入的視訊也是響應式（Responsive）的了。

　　本教程的最後一步絕對非常重要，但往往被網站開發人員忽視——字型。到現在為止，大多數開發人員（包括我自己）使用像素來定義字型的大小。雖然像素在普通網站使用是OK的，但是對于響應式網站來說應該有響應式的字型。事實上，一個響應式的字型大小應關聯它的父容器的寬度，這樣它才可以适應用戶端的螢幕。

　　rem 是相對于 HTML 元素的，不要忘了重置 HTML 的字型大小：

<code>html { </code><code>font-size</code><code>:</code><code>100%</code><code>; }</code>

　　完成後，您可以定義響應式的字型大小，如下所示：

<code>@media (</code><code>min-width</code><code>: </code><code>640px</code><code>) { body {</code><code>font-size</code><code>:</code><code>1</code><code>rem;} }</code>

<code>@media (</code><code>min-width</code><code>:</code><code>960px</code><code>) { body {</code><code>font-size</code><code>:</code><code>1.2</code><code>rem;} }</code>

<code>@media (</code><code>min-width</code><code>:</code><code>1100px</code><code>) { body {</code><code>font-size</code><code>:</code><code>1.5</code><code>rem;} }</code>

　　請注意，舊浏覽器不支援 rem 單元，是以不要忘了實作一個替代。

　　這就是今天的所有内容了，希望你會喜歡這個教程！記得推薦和分享啊！

本文轉自山邊小溪 51CTO部落格，原文連結：http://blog.51cto.com/lihongbo/1158086，如需轉載請自行聯系原作者