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

這篇文章主要介紹了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è)備對(duì)該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng) viewport。

1CSS 方面去掉所有元素的外間距內(nèi)邊距，html 和 body 寬高設(shè)為 100%，canvas 元素 display 設(shè)為 block2JS 方面監(jiān)聽(tīng)窗口的 resize 事件，在窗口大小改變的同時(shí)調(diào)整 canvas 的大小3完整代碼這里我們使用 jQuery 來(lái)處理窗口尺寸改變事件響應(yīng)，以及屬性設(shè)置4同時(shí)使用 $windowget0。

ltstyle type=quottextcssquot html fontsize 42px ltstyle4 按照設(shè)計(jì)圖的像素進(jìn)行開(kāi)發(fā) 按照正常網(wǎng)頁(yè)開(kāi)發(fā)流程，進(jìn)行網(wǎng)頁(yè)開(kāi)發(fā)即可5 使用百分比和rem替換px 代碼效果對(duì)比*使用固定像素*box float left width 658px fontsize 72px textalign。

lthtml ltscript type=quottextjavascriptquot src=quotjsjquery1113minjsquotltscript ltscript type=quottextjavascriptquot 判斷pc瀏覽器是否縮放，若返回100則為默認(rèn)無(wú)縮放，如果大于100則是放大，否則縮小 function detectZoom var ratio = 0，screen = windowscreen，ua = navigator。

HTML5的移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)稿，通常情況下，內(nèi)容區(qū)為750px或960px或者1080px的，一般不小于750px像素大小寬度設(shè)計(jì)稿可以比750px大，但是絕對(duì)不能比750px小，這個(gè)主要是由于當(dāng)前手機(jī)的分辨率相對(duì)較高iPhone6是375物理像素，但實(shí)際像素為其兩倍，也就是750，這個(gè)750就是這么來(lái)的如果設(shè)計(jì)圖稿過(guò)小，前端。

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

HTML5的移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)稿，通常情況下，內(nèi)容區(qū)為750px或960px或者1080px的，一般不小于750px像素大小寬度設(shè)計(jì)稿可以比750px大，但是絕對(duì)不能比750px小，這個(gè)主要是由于當(dāng)前手機(jī)的分辨率相對(duì)較高iPhone 6是375物理像素，但實(shí)際像素為其兩倍，也就是750，這個(gè)750就是這么來(lái)的如果設(shè)計(jì)圖稿過(guò)小。

移動(dòng)端的h5頁(yè)面的尺寸是多少H5的尺寸一般設(shè)計(jì)為640x1136px 既滿足了顯示需求，又能降低用戶加載圖片需要的帶寬可以用各種分辨率的移動(dòng)智能手機(jī)查看我們?cè)O(shè)計(jì)的H5頁(yè)面時(shí)，當(dāng)然，也會(huì)出現(xiàn)如下的情況，內(nèi)容顯示不全，甚至一些重要內(nèi)容和按鈕都會(huì)被遮擋第一背景圖片必須采用backgroundsizecover來(lái)實(shí)現(xiàn)第。

手機(jī)的屏幕有大有小，移動(dòng)web最好做成響應(yīng)式布局，也就是自適應(yīng)屏幕，沒(méi)有固定寬高，這樣的話，在所有手機(jī)上都可以正常顯示ico的話可以使用字體圖標(biāo)，現(xiàn)在大部分手機(jī)瀏覽器都支持html5和css3的Web前端開(kāi)發(fā)工程師是一個(gè)很新的職業(yè)，在國(guó)內(nèi)乃至國(guó)際上真正開(kāi)始受到重視的時(shí)間不超過(guò)7年Web前端開(kāi)發(fā)是從。

由于HTML5和微信內(nèi)置瀏覽器的火爆，移動(dòng)端H5網(wǎng)頁(yè)越發(fā)流行在設(shè)計(jì)制作移動(dòng)端網(wǎng)頁(yè)的時(shí)候，你是否疑惑，這種網(wǎng)站設(shè)計(jì)稿應(yīng)該做成的多少屏寬，是否應(yīng)該跟手機(jī)的分辨率一致，還是應(yīng)該按照iPhone的分辨率來(lái)設(shè)計(jì)注意H5網(wǎng)頁(yè)區(qū)別于APP，APP的設(shè)計(jì)稿直接按照手機(jī)分辨率來(lái)設(shè)計(jì)？那么對(duì)于現(xiàn)在2K屏幕的手機(jī)，應(yīng)該如何制作設(shè)計(jì)稿和前端稿呢。

html5 label定長(zhǎng)不隨文字的多少改變大小，這個(gè)的話，我們是可以通過(guò)CSS來(lái)搞定的，設(shè)置label的width，height，那樣他自然它的大小就不能被改變，這里我寫(xiě)一段代碼 label width300px height200px Male Female。

3無(wú)論什么元素，一旦設(shè)置為是浮動(dòng)顯示，就擁有了完整的盒模型結(jié)構(gòu)，我們就可以使用外邊距，內(nèi)邊距，邊框，高和寬來(lái)控制的大小以及與其他對(duì)象之間的位置關(guān)系4浮動(dòng)是從網(wǎng)頁(yè)布局的角度來(lái)定義元素的顯示，而行內(nèi)和塊狀屬性主要是從元素自身的性質(zhì)來(lái)定其顯示的5當(dāng)元素沒(méi)有定義邊框時(shí)，可以把內(nèi)邊距。

3相對(duì)大小的字體 字體也不能使用絕對(duì)大小px，而只能使用相對(duì)大小embody font normal 100% Helvetica， Arial， sansserif 上面的代碼指定，字體大小是頁(yè)面默認(rèn)大小的100%，即16像素h1 fontsize 15em 然后，h1的大小是默認(rèn)大小的15倍，即24像素2416=15s。

上面是A3紙的大小，body的大小要設(shè)置成3508*4961像素，一般網(wǎng)頁(yè)需要72分辨率就行，但是如果打印出來(lái)就需要是300像素。