HTML5移動(dòng)頁面自適應(yīng)手機(jī)屏幕的方法有哪些

今天小編給大家分享一下HTML5移動(dòng)頁面自適應(yīng)手機(jī)屏幕的方法有哪些的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

為昌江黎族等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及昌江黎族網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、成都網(wǎng)站制作、昌江黎族網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

1、使用meta標(biāo)簽：viewport

H5移動(dòng)端頁面自適應(yīng)普遍使用的方法，理論上講使用這個(gè)標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對(duì)該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。

viewport 是用戶網(wǎng)頁的可視區(qū)域。翻譯為中文可以叫做"視區(qū)"。

手機(jī)瀏覽器是把頁面放在一個(gè)虛擬的"窗口"（viewport）中，通常這個(gè)虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個(gè)網(wǎng)頁擠到很小的窗口中（這樣會(huì)破壞沒有針對(duì)手機(jī)瀏覽器優(yōu)化的網(wǎng)頁的布局），用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。

viewport標(biāo)簽極其屬性：

每個(gè)屬性的詳細(xì)介紹：

屬性名取值描述Width＜/td>正整數(shù) 或？device-Width＜/td>定義視口的寬度，單位為像素Height＜/td>正整數(shù) 或？device-Height＜/td>定義視口的高度，單位為像素，一般不用initial-scale[0.0-10.0]定義初始縮放值minimum-scale[0.0-10.0]定義縮小最小比例，它必須小于或等于maximum-scale設(shè)置maximum-scale[0.0-10.0]定義放大最大比例，它必須大于或等于minimum-scale設(shè)置user-scalableyes/no定義是否允許用戶手動(dòng)縮放頁面，默認(rèn)值yes

2、使用css3單位rem

rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em），使用rem為元素設(shè)定字體大小時(shí)，是相對(duì)大小，但相對(duì)的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對(duì)于不支持它的瀏覽器多寫一個(gè)絕對(duì)單位的聲明。這些瀏覽器會(huì)忽略用rem設(shè)定的字體大小。下面就是一個(gè)例子：

p {font-size:14px; font-size:.875rem;}

默認(rèn)html的font-size是16px，即1rem=16px，如果某div寬度為32px你可以設(shè)為2rem。

通常情況下，為了便于計(jì)算數(shù)值則使用62.5%，即默認(rèn)的10px作為基數(shù)。當(dāng)然這個(gè)基數(shù)可以為任何數(shù)值，視具體情況而定。設(shè)置方法如下：

Html{font-size:62.5%（10/16*100%）}

具體不同屏幕下的規(guī)則定義，即基數(shù)的定義方式：可以通過CSS定義，不同寬度范圍里定義不同的基數(shù)值，當(dāng)然也可以通過js一次定義方法如下：

（function （doc, win） {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function （） {

var clientWidth = docEl.clientWidth;

if （！clientWidth） return;

docEl.style.fontSize = 20 * （clientWidth / 320） + 'px';//其中“20”根據(jù)你設(shè)置的html的font-size屬性值做適當(dāng)?shù)淖兓?/p>

};

if （！doc.addEventListener） return;

win.addEventListener（resizeEvt, recalc, false）;

doc.addEventListener（'DOMContentLoaded', recalc, false）;

}）（document, window）;

</script>

3、使用媒體查詢

媒體查詢也是css3的方法，我們要解決的問題是適應(yīng)手機(jī)屏幕，這個(gè)媒體查詢正是為解決這個(gè)問題而生。

媒體查詢的功能就是為不同的媒體設(shè)置不同的css樣式，這里的“媒體”包括頁面尺寸，設(shè)備屏幕尺寸等。

例如：如果瀏覽器窗口小于 500px, 背景將變?yōu)闇\藍(lán)色：

@media only screen and （max-width: 500px） {

body {

background-color: lightblue;

}

4、使用百分比

百分比指的是父元素，所有百分比都是這樣的。子元素寬度50%，那么父元素的寬度就是100%；

所以body默認(rèn)寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡單的頁面，復(fù)雜的頁面實(shí)現(xiàn)很困難。

以上就是“HTML5移動(dòng)頁面自適應(yīng)手機(jī)屏幕的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

標(biāo)題名稱：HTML5移動(dòng)頁面自適應(yīng)手機(jī)屏幕的方法有哪些
本文鏈接：http://muchs.cn/article24/gdijce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站營銷

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

猜你還喜歡下面的內(nèi)容