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

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

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

/* 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 創建的一款非常的響應式測試工具。

　　一個響應式的布局是實現響應網站的第一步。現在，讓我們把注意力集中在另外一個現代化網站非常重要的方面：媒體，如視頻或圖像。 下面的 CSS 代碼將確保您的圖像將永遠不會大于他們的父容器，代碼非常簡單，適用于大多數網站。請注意，IE6 等舊的瀏覽器不支持 max-width 指令。

img { max-width: 100%; }

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

　　這是由 Nicolas Gallagher 發明的好方法。讓我們看看 HTML：

<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">

　　正如你可以看到，我們使用 data-* 屬性來存儲替換圖像的 URL。現在，讓我們使用強大的 CSS3 來為匹配 min-device-width 條件的媒體指定替換圖像：

@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：

<div class="video-container"> <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe></div>

　　CSS：

.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）的了。

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

　　CSS3 規范引入了一個新的單位叫 rem，和 em 類相似，但相對于 HTML 元素來說， rem 更易于使用。

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

html { font-size:100%; }

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

　　請注意，舊瀏覽器不支持 rem 單元，所以不要忘了實現一個替代。