感應式設計，簡單來說，就是當用不同設備訪問時，能夠根據(jù)設備的寬度和高度對設備進行動態(tài)的適配例如，用iPhone4iPhone5iPhone6PCiPad訪問同一個網(wǎng)址，正好能打開一個適合該設備的一個HTML5的頁面，不留白邊，不；可以用JS監(jiān)控屏幕大小，然后調(diào)整Canvas的大小在代碼中加入JS windowresizeresizeCanvas function resizeCanvas canvasattrquotwidthquot， $windowget0innerWidth canvasattrquotheightquot， $window；在網(wǎng)頁的中增加以上這句話，可以讓網(wǎng)頁的寬度自動適應手機屏幕的寬度其中width=devicewidth 表示寬度是設備屏幕的寬度 initialscale=10表示初始的縮放比例 minimumscale=05表示最小的縮放比例 maximumscale=；HTML5增加了自定義屬性的特性在HTML代碼中，我們可以直接在標簽上定義自定義屬性，并且自定義屬性應該命名為數(shù)據(jù)開始 pdatahello=這是自定義屬性的值呵呵呵呵p我們可以使用原生JS來獲取自定義屬性的值letp=document；瀏覽器部分能夠顯示的最小字體未12px，當移動端頁面寬度為320px時，要保證最小字體為12px，那么在1080px的設計圖中，最小字體應當為42px代碼實例ltstyle type=quottextcssquot html fontsize 42px。

只有內(nèi)嵌css有效，外部css會出現(xiàn)拉伸的情況，所以有兩種方案 var myCanvas = quotltcanvas id=#39myCanvas#39 width=#39quot + screenavailWidth + quotpx#39 height=#39quot+ screenavailHeight + quotpx#39ltvanvasquot；05 在HTML文件中加上對樣式文件的引用，返回文件夾，雙擊HTML文件，發(fā)現(xiàn)瀏覽器的變化會引著圖片一起變化，自適應屏幕的大?。?，輸入positionfixedtop0left0將整個div固定在屏幕的頂部和左側(cè)2輸入width100％height100％min－width1000px這個可以適合div的高度和寬度，而min－width是為了實現(xiàn)讓屏幕寬度在1000px以內(nèi)時。

這樣你看，不管你是用普通的img元素，還是用html5畫布，都可以自適應瀏覽器窗口的分辨率關于作圖大小的問題要看你的需求，如果需要全部可見，那么你作圖的尺寸上限就不能超過屏幕可見范圍，如果可以使用scroll卷軸來瀏覽，那么；這篇文章主要介紹了HTML5 移動頁面自適應手機屏幕四類方法總結(jié)，非常具有實用價值，需要的朋友可以參考下1使用meta標簽viewportH5移動端頁面自適應普遍使用的方法，理論上講使用這個標簽是可以適應所有尺寸的屏幕的，但是各設備；首先你要在html頁面頭部加上下面的代碼，其次你要把頁面中的寬度修改為百分比，不能不用固定尺寸，一些小的模塊可以用固定尺寸再就是css中要應用到媒體查詢，也就是@media，不懂可以百度ltmeta name=quotviewportquot content=；圖片分為背景圖片和通過img標簽引入的圖片，前者可以通過media query自動的切換不同分辨率的版本，但是在不支持background image size的瀏覽器中背景圖片無法無級的調(diào)整大小。

在文檔流中，DIV的高度默認就是根據(jù)內(nèi)容的高度自適應的如果是想適配不同設備的窗口大小，可以設置百分比或者通過position定位，然后設置top和bottom值再或者利用css3的flexbox布局，設置父級的display為flex，方向為縱的；html5中是通過css3的backgroundsize來控制自適應的直接在圖片代碼里面設置style，例如ltimg src=quotxxxjpgquot style=quotmaxwidth100%quot2要么給圖片統(tǒng)一一個class名例如responseimg，然后在css文件里面設置這個class h；“自適應網(wǎng)頁設計”的核心，就是CSS3引入的 Media Query模塊它的意思就是，自動探測屏幕寬度，然后加載相應的CSS文件上面的代碼意思是，如果屏幕寬度小于400像素maxdevicewidth 400px，就加載tinyScreencss文件。