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

userscalable = noquot ltlink rel=quotstylesheetquot type=quottextcssquot href=quotcssresetcssquot ltheadltbody ltdiv class=quotwrapquotltdivltbodylthtml代碼解析由于使用不同設(shè)備打開網(wǎng)頁時(shí)，寬度。

5 PhotosPhotosy是非常適合展示攝影作品的WordPress主題著陸頁模板該模板包括了幾個(gè)著陸頁面布局，最大的特色是長滾動的單頁面布局亮點(diǎn)在于包括了carousalInstagram提要博客文章和帶有多個(gè)選項(xiàng)的欄目該模板具有全畫布。

一自適應(yīng)網(wǎng)頁設(shè)計(jì) 自從2010年，Ethan Marcotte提出了 “自適應(yīng)網(wǎng)頁設(shè)計(jì)”Responsive Web Design這個(gè)名詞，指可以自動識別屏幕寬度并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)他制作了一個(gè) 范例，里面是福爾摩斯歷險(xiǎn)記六個(gè)主人公的。

先給你寫一套代碼，之后再來解釋哈css部分aa display flex 使用flex布局，可以輕易獲得水平布局 alignitems center 垂直方向居中 justifycontent center 水平方向居中 height 200px。

首先你要在html頁面頭部加上下面的代碼，其次你要把頁面中的寬度修改為百分比，不能不用固定尺寸，一些小的模塊可以用固定尺寸再就是css中要應(yīng)用到媒體查詢，也就是@media，不懂可以百度ltmeta name=quotviewportquot content=。

第一種，偽“感應(yīng)式”設(shè)計(jì)HTML5模板類方案上圖是HTML5模板類測試結(jié)果，依次是iPhone4iPhone5iPhone6 可以看出iPhone4時(shí)，變形最嚴(yán)重，iPhone5效果最好，iPhone6是等比例縮放后，兩側(cè)邊緣，有些像素顯示不了因此。

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

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

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

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

而且如果一個(gè)網(wǎng)站有多個(gè)portal入口，會大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度于是，很早就有人設(shè)想，能不能”一次設(shè)計(jì)，普遍適用”，讓同一張網(wǎng)頁自動適應(yīng)不同大小的屏幕，根據(jù)屏幕寬度，自動調(diào)整布局layout。

通過下面的代碼你可以自己動手修改博客的模板，盡顯非凡個(gè)性，不過小心弄不好可就面目全非了ltSTYLE type=textcss body backgroundurl頁面背景圖片 repeat scroll！important logo backgroundurl題圖logo圖片。

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

頭部要加的是這個(gè)，放在ltheadlthead標(biāo)簽里，這是初始化手機(jī)屏幕的ltmeta name=quotviewportquot content=quotwidth=devicewidth， initialscale=10， maximumscale=10， userscalable=noquot 你寫的這段是要放在所有css。