響應式設計思惟

Responsive Web Design

經過媒體查詢@media爲不一樣大小的設備加載不一樣層疊樣式表

<meta name="viewport" content="width=device-width" />

<link rel="stylesheet" type="text/css" href="pc.css" media="screen" />

<link rel="stylesheet" type="text/css" href="tab.css" media="screen and (min-width:600px) and (max-width:979px)" />

<link rel="stylesheet" type="text/css" href="phone.css" media="screen and (min-width:599px)" />

元素寬度屬性爲佔父元素的佔比而不是固定數值

圖片自適應 設寬度爲100%  高度自動 給父元素設定固定比例

能夠經過設置 html{ font-size:300%; } 而頁面中須要具體寬度則用 rem 代替

媒體查詢時則能夠經過更改不一樣設備的 html{ font-size:200%; } 來實現，沒必要加載三個樣式表。