HTML5 響應式（自適應）網頁設計

現在，很多專案都需要做響應式或者自適應的來適應我們不同螢幕尺寸的手機，電腦等裝置，那麼就需要我們在頁面上下功夫，下面我就來說一下如何做響應式（自適應）的網頁設計

1、在網頁**的頭部，加入一行viewport元標籤

在網頁的中增加以上這句話，可以讓網頁的寬度自動適應手機螢幕的寬度，下面是這些屬性的解釋：

1）width=device-width ：表示寬度是裝置螢幕的寬度

2）initial-scale=1.0：表示初始的縮放比例，1.0就是佔網頁的100%

3）minimum-scale=1.0：表示最小的縮放比例

4）maximum-scale=1.0：表示最大的縮放比例

5）user-scalable=no：表示使用者是否可以調整縮放比例

如果要相容ie6/7/8的話，就要用css3-mediaqueries.js

2、寬度不要用絕對的

width:auto; / width:xx%;  

3、字型大小是頁面預設大小的100%，即16畫素，不要使用絕對大小"px"，要使用相對大小「rem」

html

body

當然搭配**查詢的樣式會更好，比如

html10px==62.5%

@mediascreenand (min-width:321px) and (max-width:375px)}

@mediascreenand (min-width:376px) and (max-width:414px)}

@mediascreenand (min-width:415px) and (max-width:639px)}

@mediascreenand (min-width:640px) and (max-width:719px)}

@mediascreenand (min-width:720px) and (max-width:749px)}

@mediascreenand (min-width:750px) and (max-width:799px)}

@mediascreenand (min-width:800px)}

不過如果在pc端，最好用min-width，max-width，在移動端最好用min-device-width和max-device-width

4、流動布局，"流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的

.left

.right

像這樣，用左浮動和右浮動，好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢位），避免了水平滾動條的出現

5、選擇載入css

"自適應網頁設計"的核心，就是css3引入的media query模組。自動探測螢幕寬度，然後載入相應的css檔案

<linkrel="stylesheet" type="text/css" media="screen and (max-device-width: 600px)" href="style/css/css600.css" />

這段**的意思是：如果螢幕寬度小於600畫素（max-device-width: 600px），就載入css600.css檔案。

如果螢幕寬度在600畫素到980畫素之間，則載入css600-980.css檔案

<linkrel="stylesheet" type="text/css" media="screen and (min-width: 600px) and (max-device-width: 980px)" href="css600-980.css" />

還有(不建議使用)：除了用html標籤載入css檔案，還可以在現有css檔案中載入

@importurl("css600.css")screenand (max-device-width:600px);

6、css的@media規則（如果有需要就寫）

@mediascreenand (max-device-width:400px) }

當螢幕寬度小於400px的時候，就取消浮動

7、自適應，"自適應網頁設計"還必須實現的自動縮放。

img

windows平台縮放時，可能出現影象失真現象。這時，可以嘗試使用ie的專有命令

img

或使用js--imgsizer.js　

addloadevent(function() );

好，這樣寫出的網頁就會自適應啦！　　

HTML5 響應式（自適應）網頁設計

現在，很多專案都需要做響應式或者自適應的來適應我們不同螢幕尺寸的手機，電腦等裝置，那麼就需要我們在頁面上下功夫，下面我就來說一下如何做響應式 自適應 的網頁設計 1 在網頁 的頭部，加入一行viewport元標籤 在網頁的中增加以上這句話，可以讓網頁的寬度自動適應手機螢幕的寬度，下面是這些屬性的解釋...

HTML5響應式（自適應）網頁設計的實現

第一步 在網頁 的頭部，加入一行viewport元標籤 程式設計客棧t viewport content width device width,initial scale 1 viewport是網頁預設的寬度和高度，上面這行 的意思是 網頁寬度預設等於螢幕寬度 width device width ...

自適應網頁設計 響應式Web設計

一 自適應網頁設計 的概念 2010年，ethan marcotte提出了 自適應網頁設計 responsive web design 這個名詞，指可以自動識別螢幕寬度 並做出相應調整的網頁設計。他製作了乙個範例，裡面是 福爾摩斯歷險記 六個主人公的頭像。如果螢幕寬度大於1300畫素，則6張併排在一...