HTML5 移动页面自适应手机屏幕四类方法
2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
?
?1、使用meta標(biāo)簽：viewport
H5移動端頁面自適應(yīng)普遍使用的方法，理論上講使用這個標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。
viewport 是用戶網(wǎng)頁的可視區(qū)域。翻譯為中文可以叫做"視區(qū)"。
手機瀏覽器是把頁面放在一個虛擬的"窗口"（viewport）中，通常這個虛擬的"窗口"（viewport）比屏幕寬，這樣就不用把每個網(wǎng)頁擠到很小的窗口中（這樣會破壞沒有針對手機瀏覽器優(yōu)化的網(wǎng)頁的布局），用戶可以通過平移和縮放來看網(wǎng)頁的不同部分。
viewport標(biāo)簽極其屬性：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
?
每個屬性的詳細介紹：
? ?? ???
屬性名
? ?? ?
取值
? ?
描述
??
? ?
width
??
正整數(shù)?或?device-width
??
定義視口的寬度，單位為像素
? ?
height
??
正整數(shù)?或?device-height
??
定義視口的高度，單位為像素，一般不用
? ?
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-scalable
??
yes/no
??
定義是否允許用戶手動縮放頁面，默認值yes
2、使用css3單位rem
rem是CSS3新增的一個相對單位（root em，根em）,使用rem為元素設(shè)定字體大小時，是相對大小，但相對的只是HTML根元素。通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。
目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對于不支持它的瀏覽器多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設(shè)定的字體大小。下面就是一個例子：
p {font-size:14px;font-size:.875rem;}
?
默認html的font-size是16px，即1rem=16px，如果某div寬度為32px你可以設(shè)為2rem。
通常情況下，為了便于計算數(shù)值則使用62.5%，即默認的10px作為基數(shù)。當(dāng)然這個基數(shù)可以為任何數(shù)值，視具體情況而定。設(shè)置方法如下：
Html{font-size:62.5%(10/16*100%)}
+434623999群交流學(xué)習(xí)，領(lǐng)取資料
具體不同屏幕下的規(guī)則定義，即基數(shù)的定義方式：可以通過CSS定義，不同寬度范圍里定義不同的基數(shù)值，當(dāng)然也可以通過js一次定義方法如下：
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif
<script type="text/javascript">
? ?(function(doc, win) {
? ?? ?vardocEl = doc.documentElement,
? ?? ???resizeEvt ='orientationchange' in window ? 'orientationchange' : 'resize',
? ?? ???recalc = function (){
? ?? ?? ? varclientWidth = 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>
?
+434623999群交流學(xué)習(xí)，領(lǐng)取資料
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image001.gif
3、使用媒體查詢
媒體查詢也是css3的方法，我們要解決的問題是適應(yīng)手機屏幕，這個媒體查詢正是為解決這個問題而生。
媒體查詢的功能就是為不同的媒體設(shè)置不同的css樣式，這里的“媒體”包括頁面尺寸，設(shè)備屏幕尺寸等。
例如：如果瀏覽器窗口小于 500px, 背景將變?yōu)闇\藍色：
@media only screen and (max-width: 500px) {
? ? body {
? ?? ???background-color:lightblue;
? ? }
}
4、使用百分比
百分比指的是父元素，所有百分比都是這樣的。子元素寬度50%，那么父元素的寬度就是100%；
所以body默認寬度是屏幕寬度（PC中指的是瀏覽器寬度）子孫元素按百分比定位（或指定尺寸）就可以了，這只適合布局簡單的頁面，復(fù)雜的頁面實現(xiàn)很困難。
+434623999群交流學(xué)習(xí)，領(lǐng)取資料
轉(zhuǎn)載于:https://my.oschina.net/u/3709170/blog/1591329
總結(jié)
以上是生活随笔為你收集整理的HTML5 移动页面自适应手机屏幕四类方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SpringOne 2017：与Pivo
- 下一篇： 30.Node.js 全局对象