這篇文章主要介紹了HTML5 移動(dòng)頁(yè)面自適應(yīng)手機(jī)屏幕四類(lèi)方法總結(jié)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下1使用meta標(biāo)簽viewportH5移動(dòng)端頁(yè)面自適應(yīng)普遍使用的方法，理論上講使用這個(gè)標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備；1圖片寬高固定，這種情況很簡(jiǎn)單水平居中就在圖片的css中加dispalyblockmargin0auto垂直居中自己算出p的高度圖片的高度2，得到margintop值即可2圖片高度未知，這個(gè)布局比較難實(shí)現(xiàn)一般我是用js做的。

4，TableLayout，特點(diǎn)每個(gè)TableLayout都是由一個(gè)或多個(gè)TableRow組成的，一個(gè)TableRow就代表TableLayout的一行5，AbsoluteLayout，表格布局類(lèi)似Html里面的Table每一個(gè)TableLayout里面有表格行TableRow，TableRow里面可以具體定義每；方案一iScroll v513 設(shè)置momentum true 方案二配置probeType 方案三開(kāi)啟硬價(jià)加速給scroll元素增加css樣式webkittransformtranslate3d0，0，0方案四判斷手機(jī)版系統(tǒng)版本，應(yīng)用原生CSSoverflowyscroll。

rem布局的兼容性Mozilla Firefox 36+Apple Safari 5+Google ChromeIE9+和Opera11+ie6ie8 還是別用rem 不過(guò)現(xiàn)在的手機(jī)一般瀏覽器，一般可以直接不用去管IE內(nèi)核的瀏覽器了REM的計(jì)算公式 例html 設(shè)置font；智能手機(jī)一般都是用html5，從手機(jī)網(wǎng)站設(shè)計(jì)來(lái)講，需要自適應(yīng)手機(jī)屏幕大小，最好是采用HTML5+CSS3，從行業(yè)網(wǎng)站類(lèi)別上講，網(wǎng)站設(shè)計(jì)應(yīng)注意的有背景顏色網(wǎng)站布局等等當(dāng)然，這只是簡(jiǎn)單通俗的理解，在技術(shù)上和設(shè)計(jì)上，有自己的技術(shù)；aa display flex 使用flex布局，可以輕易獲得水平布局 alignitems center 垂直方向居中 justifycontent center 水平方向居中 height 200px border 1px solid #000aa1， aa2；1在手機(jī)主頁(yè)點(diǎn)擊設(shè)置，進(jìn)入設(shè)置頁(yè)面2設(shè)置界面點(diǎn)擊應(yīng)用程序進(jìn)入3接著點(diǎn)擊應(yīng)用程序界面右上角的圖標(biāo)4彈出的頁(yè)面中，選擇菜單欄的默認(rèn)應(yīng)用程序5進(jìn)入默認(rèn)應(yīng)用程序列表后，選擇主屏幕選項(xiàng)，進(jìn)入相應(yīng)頁(yè)面6在；1適配的群體不同，響應(yīng)式適配各種終端，而移端大部分為智能手機(jī)為主2響應(yīng)式布局能根據(jù)不同的終端設(shè)備實(shí)現(xiàn)不同的頁(yè)面布局，而移動(dòng)端布局大部分是單列布局3響應(yīng)式布局有可能造成冗余的代碼較多傳統(tǒng)式響應(yīng)式布局，僅依。

1打開(kāi)百度，在百度上搜索易企秀，然后點(diǎn)擊搜索，在搜索的結(jié)果中點(diǎn)擊進(jìn)入易企秀的官方網(wǎng)站2進(jìn)入后，先登錄自己的賬號(hào)，可以直接用微信登錄即可，登錄后就可以開(kāi)始制作自己的手機(jī)網(wǎng)頁(yè)微場(chǎng)景了3首先點(diǎn)擊我的；4該方法是唯一一個(gè)所有瀏覽器都支持的方法，類(lèi)似還有如下方法，但是只有在Chrome和Safari有效5代碼如下6再次測(cè)試，效果如下7相比于input被擋住，突兀地出現(xiàn)在頁(yè)面中間更加可以令人接受，但是多次測(cè)試，仍然存在問(wèn)題。

如果布局寬度是414px，此時(shí)基準(zhǔn)字體大小變成 414 10 = 414px，然后設(shè)置lthtml style=quotfont=1766px 如果布局寬度變成360px，此時(shí)基準(zhǔn)字體大小變成36px，然后設(shè)；2手機(jī)瀏覽器 瀏覽器已經(jīng)逐漸從傳統(tǒng)桌面轉(zhuǎn)向手機(jī)端，競(jìng)爭(zhēng)也越來(lái)越激烈目前國(guó)內(nèi)市場(chǎng)主流的手機(jī)瀏覽器UC百度歐朋海豚safariChrome，這些瀏覽器都是基于webkit內(nèi)核的，兼容性方面不存在問(wèn)題，同時(shí)對(duì)html5和css3；2KendoUIKendoUI是一個(gè)HTML5平臺(tái)，開(kāi)發(fā)者利用它可以開(kāi)發(fā)新穎的交互的移動(dòng)應(yīng)用程序和網(wǎng)站該框架提供了大量的動(dòng)畫(huà)和豐富的拖拽功能模板功能以及提供了將近10款客戶(hù)端常用的數(shù)據(jù)綁定小部件，如圖表組合框以及常用表格3；如上33圖所示，此時(shí)你可以查看手機(jī)網(wǎng)頁(yè)的DOM結(jié)構(gòu)，并且和電腦端網(wǎng)頁(yè)調(diào)試無(wú)異，當(dāng)鼠標(biāo)滑過(guò)這些DOM節(jié)點(diǎn)的時(shí)候手機(jī)上的相應(yīng)布局也會(huì)高亮起來(lái)，如下圖點(diǎn)擊查看大圖二Android + Chrome 1設(shè)置手機(jī) 11設(shè)置關(guān)于。