固定寬度，兩邊留白
viewport縮放
上面兩種方法弊端較多，實現起來也比較簡單；贊不記錄
rem等比例適配
html {
font-size : 20px;
}
@media only screen and (min-width: 320px){
html {
font-size: 10px !important;
}
}
@media only screen and (min-width: 384px){
html {
font-size: 12px !important;
}
}
@media only screen and (min-width: 480px){
html {
font-size: 15px !important;
}
}
@media only screen and (min-width: 640px){
html {
font-size: 20px !important;
}
}rem是基於根元素的相對單位
上述示例結果如下：
CSS @media
簡介
通過不同的媒體類型和條件定義樣式表規則。媒體查詢讓CSS可以更精確作用於不同的媒體類型和同一媒體的不同條件。媒體查詢的大部分媒體特性都接受min和max用於表達”大於或等於”和”小與或等於”。如：width會有min-width和max-width媒體查詢可以被用在CSS中的@media和@import規則上，也可以被用在HTML和XML中。通過這個標籤屬性，我們可以很方便的在不同的設備下實現豐富的界面，特別是移動設備，將會運用更加的廣泛。
設備類型(media type):
all所有設備；
screen 電腦顯示器；
print打印用紙或打印預覽視圖；
handheld便攜設備；
tv電視機類型的設備；
speech語意和音頻盒成器；
braille盲人用點字法觸覺回饋設備；
embossed盲文打印機；
projection各種投影設備；
tty使用固定密度字母柵格的媒介，比如電傳打字機和終端。設備特性(media feature):
| 媒體特性 | 值 | 可用媒體類型 | 接受min/max | 簡介 |
|---|---|---|---|---|
| width | 視覺屏幕/觸摸設備 | yes | ||
| heigth | 視覺屏幕/觸摸設備 | yes | ||
| device-width | 視覺屏幕/觸摸設備 | yes | ||
| device-heigth | 視覺屏幕/觸摸設備 | yes | ||
| orientation | portrait | landscape | 位圖介質類型 | no |
| aspect-ratio | 位圖介質類型 | yes | ||
| device-aspect-ratio | 位圖介質類型 | yes | 定義’device- | |
| color | 視覺媒體 | yes | ||
| color-index | 視覺媒體 | yes | ||
| monochrome | 視覺媒體 | yes | 定義在一個單色框架緩衝區中每像 | |
| resolution | 位圖介質類型 | yes | ||
| scan | progressive | interlace | 電視類 | no |
| grid | 柵格設備 | no | 用來查詢輸出設備是否使用柵格或點陣。只有1和0纔是有效值，1代表是，0代表否 |
4. 語法：以下表達式摘自@杜瑤大神的css3手冊
@media：<media_query_list>
<media_query_list>：[<media_query>[',' <media_query>]*]?
<media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*
<expression>：'('<media_feature>[:<value>]?')'示例一：在link中使用@media：
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px),only screen and (max-device-width: 480px)" href="link.css"/>*對於原文有：rel=”external nofollow”；本人覺得可以去掉* *rel=”external”打開新窗口；rel=”nofollow”告訴搜索引擎，該鏈接與本站無關，請不要傳遞本站任何權重。*上面使用中only可省略，限定於計算機顯示器，第一個條件max-width是指渲染界面最大寬度，第二個條件max-device-width是指設備最大寬度。
示例二：在樣式表中內嵌@media：
@media (min-device-width:1024px) and (max-width:989px),
screen and (max-device-width:480px),
(max-device-width:480px) and (orientation:landscape),
(min-device-width:480px) and (max-device-width:1024px) and (orientation:portrait) {srules}**注意and的使用** 5、邏輯關鍵字：在示例二中，設置了電腦顯示器分辨率（寬度）大於或等於1024px（並且最大可見寬度爲989px）；屏寬在480px及其以下手持設備；屏寬在480px以及橫向（即480尺寸平行於地面）放置的手持設備；屏寬大於或等於480px小於1024px以及垂直放置設備的css樣式。
從上面的例子可以看出，字符間以空格相連，選取條件包含在小括號內，srules爲兼容設置的樣式表，包含在中括號裏面。only（限定某種設備，可省略），and（邏輯與），not（排除某種設備）爲邏輯關鍵字，多種設備用逗號分隔，這一點繼承了css基本語法。
**@media 示例**
關鍵字 說明 only 限定某種設備類型 and 邏輯與，連接設備名與選擇條件、選擇條件1與選擇條件2 not 排除某種設備
<!DOCTYPE html>
<head>
<meta charste="utf8">
<meta name="viewport" content="width=device-width; user-scalbale=no; initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="link.css"/>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script>
<![endif]-->
<style type="text\css">
/* 禁用iPhone中Safari的字號自動調整 */
html {
-webkit-text-size-adjust: none;
}
/* 設置HTML5元素爲塊 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
/* 設置圖片視頻等自適應調整 */
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
.video embed, .video object, .video iframe {
width: 100%;
height: auto;
}
</style>
</head>