響應式web設計
Android和ios的瀏覽器都基於Webkit核心。這兩種瀏覽器以及很多其他瀏覽器如chrome、opera，都支持用viewport meta元素覆蓋默認的畫布縮放設置，只需要在html的head標籤中插入一個meta標籤。meta標籤中可以設置具體的寬度或者縮放比例。示例：
<meta name="viewport" content="width=device-width,initial-scale=2,maximum-scale=3,user-scalable=no">
分析：width=device-width告訴瀏覽器頁面的寬度應該等於設備寬度；initial-scale=2頁面的縮放比例，設置比例為設備尺寸的2倍；maximum-scale=3,允許用戶將頁面最多放大至設備寬度的3倍；user-scalable=no禁止用戶縮放。縮放是一個重要的輔助功能，所以實踐中很少禁用。
響應式網站
1、粘貼下面的代碼到head和/head標籤之間
<meta name="viewport" content="width=device-width,initial-scale=1.0">
（設置比例為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 {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }
視頻
我們需要對視頻做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: auto\9; /* ie8 */
}
勿忘初心，方得始終
如果你喜歡這篇文章，可以關注作者頭條公眾號，每天都會有精彩web乾貨與你一起分享哦！