移動端Web頁面，即常說的H5頁面逗威、手機頁面峰搪、webview頁面等。
手機設(shè)備屏幕尺寸不一凯旭，在做移動端的Web頁面時概耻，需要考慮在安卓/IOS的各種尺寸設(shè)備上的兼容。
適配的目標就是做到在不同尺寸的手機設(shè)備上罐呼，頁面“相對性的達到合理的展示”或者“保持統(tǒng)一效果的等比縮放“
介紹:
長度單位:px em rem
-
px在縮放頁面時無法調(diào)整那些使用它作為單位的字體鞠柄、按鈕等的大小嫉柴； -
em的值并不是固定的厌杜，會繼承父級元素的字體大小，代表倍數(shù)计螺； -
rem的值并不是固定的夯尽，始終是基于根元素<html>的，也代表倍數(shù)登馒。
鑒于上述長度單位的特性匙握，為了滿足適配的要求，rem是最優(yōu)的選擇谊娇。
rem適配實現(xiàn)方式：
首先是如何將px轉(zhuǎn)化成rem肺孤，舉個例子來說罗晕，有一個image參數(shù)代碼如下
.img{
width:320px;
height:160px;
}
那么如果你頁面
html{
font-size：16px;
}
轉(zhuǎn)化成rem為單位的話就是
.img{
width:20rem;
height:10rem;
}
可以很明顯的得出一個公式： rem=px/font-size
當然上述只是舉一個例子來講述px和rem之間的轉(zhuǎn)換關(guān)系。
下面是用sass的函數(shù)來計算px轉(zhuǎn)rem赠堵，避免了一直手動計算
/*
* 此處 $base-font-size 具體數(shù)值根據(jù)設(shè)計圖尺寸而定
* eg:若設(shè)計圖為iPhone6(375*667)的二倍稿小渊，則$base-font-size=32px
*/
@function px2rem($px, $base-font-size: 32px) {
@if (unitless($px)) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return px2rem($px + 0px); // That may fail.
} @else if (unit($px) == rem) {
@return $px;
}
@return ($px / $base-font-size) * 1rem;
}
// 使用，eg:
font-size: px2rem(18px);
當然要做到頁面自適應(yīng)茫叭，我們還需要動態(tài)的去改變html的font-size酬屉。這里就要用到j(luò)s去獲取頁面的寬度來設(shè)置font-size，代碼如下：
<script>
$(window).load(function(doc, win) {
var docEle = doc.documentElement,
evt = "onorientationchange" in window ? "orientationchange" : "resize", //旋轉(zhuǎn)屏幕揍愁、大小變化
fn = function() {
var width = document.documentElement.clientWidth; //獲取可見寬度
var height= document.documentElement.clientHeight;//獲取可見高度
width && (docEle.style.fontSize = width / 23.437+ "px");//設(shè)置font-size
};
win.addEventListener(evt, fn, false); //添加事件
win.addEventListener('resize', fn, false);
doc.addEventListener("DOMContentLoaded", fn, false);
}(document, window))
</script>
這個js主要的地方就是設(shè)置font-size時width所除之數(shù)棕洋。它的算法是屏幕分辨率/font-size
這里我依然用16和750的分辨率來舉例最域。那么此js里的算式的除數(shù)就是 750/16=46.875脉漏。相應(yīng)的在css中的px轉(zhuǎn)rem就是我上面舉的例子房官。
當然在具體環(huán)境的應(yīng)用中，我不推薦用16px朽缎，原因是當屏幕分辨率較小時惨远，font-size算出來的值會小于12，而在webkit的瀏覽器中設(shè)置有最小的font-size為12px话肖，即當font-size小于12時仍以font-size:12px來顯示北秽，這就會導(dǎo)致顯示出現(xiàn)問題。
