05 在HTML文件中加上對(duì)樣式文件的引用，返回文件夾，雙擊HTML文件，發(fā)現(xiàn)瀏覽器的變化會(huì)引著圖片一起變化，自適應(yīng)屏幕的大小。

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

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

這種網(wǎng)頁布局就是“自適應(yīng)布局”有人喜歡把“Responsive layout”直譯成‘響應(yīng)式布局’，本人覺得‘自適應(yīng)布局’更本土化這種布局的特點(diǎn)是使用CSS媒體查詢語句@media screen and ，能根據(jù)頁面寬度，讓頁面布局。

只有內(nèi)嵌css有效，外部css會(huì)出現(xiàn)拉伸的情況，所以有兩種方案 var myCanvas = quotltcanvas id=#39myCanvas#39 width=#39quot + screenavailWidth + quotpx#39 height=#39quot+ screenavailHeight + quotpx#39ltvanvasquot。

這篇文章主要介紹了HTML5 移動(dòng)頁面自適應(yīng)手機(jī)屏幕四類方法總結(jié)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下1使用meta標(biāo)簽viewportH5移動(dòng)端頁面自適應(yīng)普遍使用的方法，理論上講使用這個(gè)標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備。

aa1 div， aa2 div， aa3 div width 80% height 100pxaa1 div backgroundcolor redaa2 div backgroundcolor greenaa3 div backgroundcolor bluehtml部分lt。

ltstyle padding0 margin 0 fontsize 12px ul，liliststyle div1width 100% div2width 30% background orange height 300px float left div3width 70% back。

圖片分為背景圖片和通過img標(biāo)簽引入的圖片，前者可以通過media query自動(dòng)的切換不同分辨率的版本，但是在不支持background image size的瀏覽器中背景圖片無法無級(jí)的調(diào)整大小。

可以用JS監(jiān)控屏幕大小，然后調(diào)整Canvas的大小在代碼中加入JS windowresizeresizeCanvas function resizeCanvas canvasattrquotwidthquot， $windowget0innerWidth canvasattrquotheightquot， $window。

HTML網(wǎng)頁的開發(fā)中，需要對(duì)大小不一的屏幕兼容，使圖片在不同的設(shè)備中可以展示預(yù)期的效果自適應(yīng)屏幕的寬度，利用css中background屬性可以實(shí)現(xiàn) 工具材料 瀏覽器，文本編輯器 新建一個(gè)HTML文件，代碼如下圖 打開HTML文件所在。