前端開發(fā)中，尤其移動端手機屏幕大小各異，該如何解決頁面適配的問題呢？下面從幾點進行了總結(jié)。

1、設(shè)計稿的布局設(shè)計

　　我們在進行H5頁面內(nèi)容規(guī)劃布局設(shè)計的時候，不能把重要的內(nèi)容放在太偏下的位置或者偏上，否則前端布局時可能出現(xiàn)內(nèi)容顯示不全的情況。

除去將瀏覽器全屏顯示的情況，幾乎所有的情況都會有頂部的狀態(tài)欄和導(dǎo)航欄。

　　iphone的設(shè)計標(biāo)準(zhǔn)，狀態(tài)欄和導(dǎo)航欄的獨立像素高度分別為40px和88px。

　　由于安卓系統(tǒng)可以更改狀態(tài)欄和導(dǎo)航欄的高度，這里可以取默認值為48px和100px。

　　那么就會把網(wǎng)頁內(nèi)容往下擠，進入盲區(qū)（根據(jù)不同的布局方式可能擠出視口，即可視區(qū)域之下）取這兩個系統(tǒng)者的最大值為148，設(shè)計稿要盡量保證單頁下面148px沒有重要內(nèi)容。

　　那么在所有屏幕大小上把重要內(nèi)容顯示完全，就要注意市面上存在的小尺寸手機屏幕，現(xiàn)在絕大部分智能手機分辨率都在640*960px（iphone4分辨率）之上，所以只要把重要內(nèi)容放在盲區(qū)之上即可，計算后的最安全高度為812（960-148=812）。

　　在此總結(jié)，一般情況下，以現(xiàn)有市場上流行的移動智能手機，單頁翻轉(zhuǎn)（非延伸向下的長頁面）設(shè)計稿尺寸為640*1136，在高度為812處設(shè)置一條安全線（參考線），將重要的內(nèi)容布局在這條安全線之上。

2、相對單位rem的使用

　　 手機頁面設(shè)計一般的大小是640，但是手機屏幕大小不確定，那么怎樣才能做出適應(yīng)所有手機的手機頁面呢？

　　一般的解決方案有兩種，rem布局和百分比布局，我更推薦用rem布局來制作手機頁面

　　rem布局的兼容性：

　　Mozilla Firefox 3.6+ ，Apple Safari 5+，Google Chrome ，IE9+和Opera11+

　　IE6-8還是別用rem了，不過在手機端，可以忽略ie內(nèi)核這個問題。

　　rem的計算公式

　　例：html設(shè)置font-size：16px ，1rem=16px

　　最核心的代碼就是這一段js運算了，根據(jù)頁面的大小來控制基礎(chǔ)rem的值，以下代碼基于jquery：

　　

//jq
var windowW = $(window).width(); var ratio = windowW/640; $("html").css("fontSize",100*ratio+"px"); $(window).on("resize",function(){var windowW = $(window).width();var ratio = windowW/640;$("html").css("fontSize",100*ratio+"px"); });


? //js function cal(){var windowW =document.documentElement.clientWidth||document.body.clientWidth;var ratio = windowW/640;if(windowW>640){document.getElementsByTagName("html")[0].style.fontSize="100px";}else{document.getElementsByTagName("html")[0].style.fontSize=100*ratio+"px";} } cal(); window.onresize = function(){cal(); }

?

ps：附上移動端的判斷，可實現(xiàn)判斷瀏覽器為移動端時，自動跳轉(zhuǎn)到手機版頁面鏈接

<script type="text/javascript">(function() {
　　 var is_iPd = navigator.userAgent.match(/(iPad|iPod|iPhone)/i) != null;
　　var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|win ce)/i) != null;
　　if(is_mobi && window.location.search.indexOf("mv=fp")<0){
　　　　javascript:window.location.href="/wap";
　　}
})

</script>

?

　　

轉(zhuǎn)載于:https://www.cnblogs.com/sherry-long/p/5999791.html

總結(jié)

以上是生活随笔為你收集整理的移动端页面适配的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。