簡單三步，讓你的網站變成響應式網站！

ios和Android瀏覽器都基於Webkit核心。這兩種瀏覽器以及很多其他瀏覽器如chrome、opera，都支持用viewport meta元素覆蓋默認的畫布縮放設置，只需要在html的head標籤中插入一個meta標籤。meta標籤中可以設置具體的寬度或者縮放比例。示例：

分析：width=device-width告訴瀏覽器頁面的寬度應該等於設備寬度；initial-scale=2頁面的縮放比例，設置比例為設備尺寸的2倍；maximum-scale=3,允許用戶將頁面最多放大至設備寬度的3倍；user-scalable=no禁止用戶縮放。縮放是一個重要的輔助功能，所以實踐中很少禁用。

1、粘貼下面的代碼到head和/head標籤之間

（設置比例為1.0這表示瀏覽器將按照其視口的實際大小來渲染頁面）

2、針對不同視口寬度修正設計

設置viewport meta 標籤後，現在我們針對不同視口修正設計效果，創建CSS樣式表，並在頁面中調用

常見媒體查詢

/* 平板電腦布局: 481px 至 768px。樣式繼承自: 移動設備布局。 */

@media only screen and (min-width: 481px) {

.class{

background: #333;

}

}

/* 桌面電腦布局: 769px 至最高 1232px。樣式繼承自: 移動設備布局和平板電腦布局。 */

@media only screen and (min-width: 769px) {

.class {

background: #666;

}

}

3、字體、視頻、彈性圖片

對於響應式網站來說應該有響應式的字體，一個響應式的字體大小應關聯它的父容器的寬度，這樣它才可以適應客戶端的屏幕。

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

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

html { font-size:100%; }

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

@media (min-width: 640px) { body }

@media (min-width:960px) { body }

@media (min-width:1100px) { body }

視頻

我們需要對視頻做max-width： 100%的設置；但是Safari對embed的該屬性支持不是很給力，所以我們以width： 100%來代替：

.video embed,

.video object,

.video iframe {

width: 100%;

height: auto;

}

彈性圖片

同樣的，對於圖片，我們也需要設置max-width:100%和height:auto，來實現其彈性化。對於IE，仍然需要一點額外的工作：

img {

max-width: 100%;

height: auto;

width: auto9; /* ie8 */

}

如果你喜歡這篇文章，可以關注作者頭條企鵝號，每天都會有精彩web乾貨與你一起分享哦！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！