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

這篇文章主要介紹了HTML5 移動頁面自適應手機屏幕四類方法總結(jié)，非常具有實用價值，需要的朋友可以參考下1使用meta標簽viewportH5移動端頁面自適應普遍使用的方法，理論上講使用這個標簽是可以適應所有尺寸的屏幕的，但是各設(shè)備對該標簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng) viewport。

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

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

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

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

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

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

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

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

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

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

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

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

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