HTML5網(wǎng)頁(yè)設(shè)計(jì)自適應(yīng)手機(jī)的方法

一般用現(xiàn)在常用的開(kāi)發(fā)框架有：目前Web前端最火的框架（BootStrap）、Jquery mobile..當(dāng)然可能還有一些移動(dòng)端開(kāi)發(fā)的框架。
移動(dòng)頁(yè)面自適應(yīng)手機(jī)屏幕的方法；
1， 利用meta標(biāo)簽
Meta標(biāo)簽主要用來(lái)描述一個(gè)HTML網(wǎng)頁(yè)文檔的屬性，如作者、日期時(shí)間、網(wǎng)頁(yè)描述、關(guān)鍵詞、頁(yè)面刷新等，它的Description和Keywords屬性，可加入網(wǎng)站的關(guān)鍵字，讓網(wǎng)頁(yè)利于搜索引擎。
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
解釋：Viewport指用戶網(wǎng)頁(yè)的可視區(qū)域，content中的“width”指的是虛擬窗口寬度，上面代碼意為虛擬窗口/頁(yè)面寬度初始比例為1，最小比例為1，大比例為1，用戶不可擴(kuò)展，頁(yè)面不可縮放。
以上標(biāo)簽只支持一種尺寸，正確的做法是用js動(dòng)態(tài)生成下面標(biāo)簽，前提是要先獲取屏幕尺寸。
<script type="text/javascript">
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (d+.d+)/.test(ua)){var version = parseFloat(RegExp.$1);
if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); }
else{document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); }
else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); }
</script>
2， 百分比法
CSS中的百分比中指的是相對(duì)于父元素的寬度。子元素的padding-left：50%，父元素的寬度是百，子元素的margin-top:20%，那么父元素的高是百。body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了。但這只適合布局簡(jiǎn)單的頁(yè)面，復(fù)雜的頁(yè)面實(shí)現(xiàn)很困難。

3， 使用CSS3單位rem
在頁(yè)面載入開(kāi)始時(shí)首先判斷window的寬度（是window的寬度($(window).width())，不是屏幕分辯率的寬度（screen.width），兩者差別請(qǐng)自行查閱），假設(shè)寬度為W，一個(gè)div在寬度為640px的設(shè)計(jì)稿的下的寬度為dW1，如果html的font-size為100px，那么這個(gè)div的寬度用rem表示是多少呢？
計(jì)算：div寬度dW2=dW1/100,px與rem之間換算除以100就可以，這是假定屏幕寬度為640的，而不同寬度的屏幕怎么處理，為了能保證換算容易那就要為html設(shè)置一個(gè)合適的font-size，計(jì)算：100 / 640 = fontSize / W, fontSize = W / 640 * 100 = W / 6.4。大多數(shù)瀏覽器font-size的最小值為12px，所以只能用100作為縮放比例。
所以會(huì)在頭部加上這個(gè)JS代碼：
<script type="text/javascript">
var html = document.querySelector(‘html‘);
var rem = html.offsetWidth / 6.4;
html.style.fontSize = rem + "px";
4， 媒體查詢
媒體查詢正是為解決網(wǎng)頁(yè)適應(yīng)手機(jī)屏幕。媒體查詢的功能就是為不同的“媒體”設(shè)置不同的css樣式，頁(yè)面尺寸，設(shè)備屏幕尺寸等，比如我們要為寬度小于480px的頁(yè)面中的class="icon"的元素設(shè)置樣式，可以這樣寫，@media screen and (max-width=480px) {.icon{ some styles }};具體可自行研究。

文章名稱：HTML5網(wǎng)頁(yè)設(shè)計(jì)自適應(yīng)手機(jī)的方法
網(wǎng)站地址：http://www.bm7419.com/news14/136714.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、定制開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、靜態(tài)網(wǎng)站、網(wǎng)站營(yíng)銷、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)