如今，乙個
**只在桌面螢幕上好看是遠遠不夠的，同時也要在平板電腦和智慧型手機中能夠良好呈現。響應式的**是指它能夠適應客戶端的螢幕尺寸，自動響應客戶端尺寸變化。在這篇文章中，我將向您展示如何通過3個簡單的步驟輕鬆地使**變成響應式（responsive）。
1 – 布局
當建立乙個響應式**，或讓現有的**變成響應式的，首先要關注的元素的布局。我在建立響應式的**，總是先建立乙個非響應的布局，頁面寬度固定大小。如果非響應版本完成得非常不錯，我再新增**查詢（media queries）和響應式**。這種操作方式更容易實現響應式特性，在同一時間專注於乙個任務。
當你已經完成了無響應的**，做的第一件事是在你的html頁面，貼上下面的**到標籤之間。這將設定螢幕按1：1的尺寸顯示，在 iphone 和其他智慧型手機的瀏覽器提供**全檢視瀏覽，並禁止使用者縮放頁面。
現在是時候新增一些**查詢了。根據 w3c **，**查詢由**型別和零個或多個**查詢的條件表示式組成。通過使用**查詢，外觀呈現可以針對特定範圍內的輸出裝置，而不需要改變內容本身。換句 話說，**查詢讓您的**在各種各種顯示器上看起來都很好，從小的智慧型手機到大的電腦螢幕等等。
**查詢取決於你的**布局，所以對我來說為您提供乙個現成可以使用的**片段有點困難。但是，下面的**對於大多數**都是乙個很好的起點。在這個例子中，#primary 是主要內容區域，#secondary 是側欄。
從**中你可以看到，我定義了兩種規格：首先有乙個最大寬度為1060px，為平板電腦優化的橫向顯示。#primary 佔在其父容器寬度的67%，#senondary 佔30%，再加上3%的左外邊距。 第二個規格是用於平板電腦和更小的螢幕尺寸。
由於智慧型手機的螢幕尺寸小，我決定給 #primary 設定100%的寬度，#secondary 也設定100%的寬度，他將在 #primary 下面。 正如我已經說過的，你可能必須要對這段**位進行修改才能適應您的**的具體需求。
1/*tablet landscape */2
@media screen and (max-width: 1060px)
4#secondary 5}
6/*tabled portrait */7
@media screen and (max-width: 768px)
9#secondary
10}
完成以後，讓我們看看你的布局是如何響應的。要做到這一點，我用這 matt kersley 建立的一款非常的
響應式測試工具。
2 、****將確保您的影象將永遠不會大於他們的父容器，**非常簡單，適用於大多數**。請注意，ie6 等舊的瀏覽器不支援 max-width 指令。
img
雖然上述技術是有效的，有時你可能需要有更多的影象控制權，例如根據客戶端的顯示大小，顯示不同的影象。
這是由
nicolas gallagher
發明的好方法。讓我們看看 html：
正如你可以看到，我們使用 data-* 屬性來儲存替換影象的 url。現在，讓我們使用強大的
css3來為匹配 min-device-width 條件的**指定替換影象：
1@media (min-device-width:600px) 5}
67@media (min-device-width:800px)
11}
nick la
html：
<div
class
="video-container"
>
<
iframe
src=""
width
="800"
height
="450"
frameborder
="0"
>
iframe
>
div>
css：
1.video-container
1415
1617
.video-container iframe,
1819
.video-container object,
2021
.video-container embed
在你的**上
應用3 – 字型
本教程的最後一步絕對非常重要，但往往被**開發人員忽視——字型。到現在為止，大多數開發人員（包括我自己）使用畫素來定義字型的大小。雖然畫素在普通 **使用是ok的，但是對於響應式**來說應該有響應式的字型。事實上，乙個響應式的字型大小應關聯它的父容器的寬度，這樣它才可以適應客戶端的螢幕。
css3規範引入了乙個新的單位叫 rem，和 em 類相似，但相對於html元素來說， rem 更易於使用。
rem 是相對於 html 元素的，不要忘了重置 html 的字型大小：
html
完成後，您可以定義響應式的字型大小，如下所示：
1@media (min-width: 640px) }
2@media (min-width:960px) }
3@media (min-width:1100px) }
請注意，舊瀏覽器不支援 rem 單元，所以不要忘了實現乙個替代。
引用於：
解決難題的5個簡單步驟
困境總是圍繞著我們。正如我高中的優秀工程老師所教的那樣，任何重大問題都可以通過5個簡單的步驟解決。我使用這些步驟來完成我的工程專案並解決其他問題。面對此類危機時，第一件事就是了解您所面對的問題。如果您不了解自己所面對的問題，那麼問題就在解決之道。一旦有了紮實的理解，就應該可以用自己的話來定義問題。一...
用3個步驟實現響應式網頁設計
寫在前面的話 隨著移動裝置的逐漸普及和web技術的發展，跨端的web開發需求將會越來越大。如何在多種裝置上進行跨端的介面適配呢？我們可以利用css3的media query來實現。本文主要介紹了移動開發和css3結合，來進行多種解析度適配的例子。文中提到的響應式網頁設計 responsive web...
用3個步驟實現響應式網頁設計
寫在前面的話 隨著移動裝置的逐漸普及和web技術的發展，跨端的web開發需求將會越來越大。如何在多種裝置上進行跨端的介面適配呢？我們可以利用css3的media query來實現。本文主要介紹了移動開發和css3結合，來進行多種解析度適配的例子。文中提到的響應式網頁設計 responsive web...