代碼實(shí)例ltstyle type=quottextcssquot html fontsize 42px ltstyle4 按照設(shè)計(jì)圖的像素進(jìn)行開發(fā) 按照正常網(wǎng)頁開發(fā)流程，進(jìn)行網(wǎng)頁開發(fā)即可5 使用百分比和rem替換px 代碼效果對比*使用固定像素；aa1 div， aa2 div， aa3 div width 80% height 100pxaa1 div backgroundcolor redaa2 div backgroundcolor greenaa3 div backgroundcolor bluehtml部分lt。

使用百分比，比如 lt img src=#39aipg#39style=#39width50%#39 這樣就會保持屏幕的50%的寬度如果有上級標(biāo)簽，比如ltdiv lt img src=#39aipg#39style=#39width50%#39 ltdiv 那圖片大小就是div寬度的50%；01 新建一個HTML文件，代碼如下圖 02 打開HTML文件所在的文件夾，雙擊文件，跳轉(zhuǎn)到瀏覽器 03 改變?yōu)g覽器大小，發(fā)現(xiàn)圖片沒有變化，顯示不全 04。

一自適應(yīng)網(wǎng)頁設(shè)計(jì) 自從2010年，Ethan Marcotte提出了 “自適應(yīng)網(wǎng)頁設(shè)計(jì)”Responsive Web Design這個名詞，指可以自動識別屏幕寬度并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)他制作了一個 范例，里面是福爾摩斯歷險(xiǎn)記六個主人公的；只有內(nèi)嵌css有效，外部css會出現(xiàn)拉伸的情況，所以有兩種方案 var myCanvas = quotltcanvas id=#39myCanvas#39 width=#39quot + screenavailWidth + quotpx#39 height=#39quot+ screenavailHeight + quotpx#39ltvanvasquot。

第一種，偽“感應(yīng)式”設(shè)計(jì)HTML5模板類方案上圖是HTML5模板類測試結(jié)果，依次是iPhone4iPhone5iPhone6 可以看出iPhone4時，變形最嚴(yán)重，iPhone5效果最好，iPhone6是等比例縮放后，兩側(cè)邊緣，有些像素顯示不了因此；ltltspanmeta name=“viewport” content=“width=devicewidth， initialscale=10， minimumscale=05， maximumscale=20， userscalable=yes” 在網(wǎng)頁的中增加以上這句話，可以讓網(wǎng)頁的寬度自動適應(yīng)手機(jī)屏幕的。

一使用textarea標(biāo)簽進(jìn)行多行文本的輸入有很多限制，比如不能實(shí)現(xiàn)高度自適應(yīng)，會出現(xiàn)難看的滾動條等問題HTML5中添加了一個新屬性contenteditable，該屬性可以讓input，textarea以外的不可編輯的標(biāo)簽具備可編輯功能用法如下；效果圖片自動伸縮，不會超過屏幕寬度原理css控制圖片的maxwidth代碼要么直接在圖片代碼里面設(shè)置style要么給圖片統(tǒng)一一個class名。

可以用JS監(jiān)控屏幕大小，然后調(diào)整Canvas的大小在代碼中加入JS windowresizeresizeCanvas function resizeCanvas canvasattrquotwidthquot， $windowget0innerWidth canvasattrquotheightquot， $window；jquery p數(shù)據(jù)你好獲取 p數(shù)據(jù)你好，設(shè)置設(shè)置 html5設(shè)置圖片自適應(yīng)屏幕寬度使用百分比，比如 這樣就會保持屏幕的50%的寬度如果有上級標(biāo)簽，比如那圖片大小就是p寬度的50%，p沒有設(shè)置寬度就會默認(rèn)是屏幕。

html5中是通過css3的backgroundsize來控制自適應(yīng)的直接在圖片代碼里面設(shè)置style，例如ltimg src=quotxxxjpgquot style=quotmaxwidth100%quot2要么給圖片統(tǒng)一一個class名例如responseimg，然后在css文件里面設(shè)置這個class h。

頭部要加的是這個，放在ltheadlthead標(biāo)簽里，這是初始化手機(jī)屏幕的ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=10， maximumscale=10， userscalable=noquot 你寫的這段是要放在所有css；這篇文章主要介紹了HTML5 移動頁面自適應(yīng)手機(jī)屏幕四類方法總結(jié)，非常具有實(shí)用價值，需要的朋友可以參考下1使用meta標(biāo)簽viewportH5移動端頁面自適應(yīng)普遍使用的方法，理論上講使用這個標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備。

1，輸入positionfixedtop0left0將整個div固定在屏幕的頂部和左側(cè)2輸入width100％height100％min－width1000px這個可以適合div的高度和寬度，而min－width是為了實(shí)現(xiàn)讓屏幕寬度在1000px以內(nèi)時。