手機頁面rem響應式佈局

手機頁面設計稿通常是640px，可是，手機屏幕大小確是不肯定的，想作出適應全部手機的手機頁面解決方案有兩種，rem佈局和百分比佈局。
這裏介紹用rem佈局來製做手機頁面：

rem是css3中新增長的一個單位值，他和em單位同樣，都是一個相對單位。不一樣的是em是相對於元素的父元素的font-size進行計算；rem是相對於根元素html的font-size進行計算。

原理：首先根據設計稿的寬度和默認的字體大小（通常是100px）計算出一個比例rem,

　　　而後用js根據默認最大屏幕寬度(通常是640px)和當前設備寬度算出須要縮放的倍數，根據這個倍數值改變html默認的字體大小。

例：

設默認最大屏幕寬度(最大屏寬)爲640px, 默認字體大小（默認fz）爲100px, 設默認設計稿寬（默認物寬）爲106px

則：rem=默認物寬/默認fz=106/100=1.06rem

設當前屏寬320px, 當前設計稿寬（當前物寬）爲x, 當前字體大小（當前fz）爲y

則：默認物寬/默認fz==當前物寬/當前fz=x/y=1.06rem , 

     最大屏寬/當前屏寬=默認物寬/當前物）=640/320=106/x

解：y=(106*320)/(640*1.06rem)=(100*320)/640=50 , 即 當前fz=（默認fz*當前屏寬）/默認屏寬

js代碼：

<script type="text/javascript">
new function (){
var _self = this;
var deviceWidth=screen.width; //設備寬度
_self.width = 640; //設置默認最大寬度
_self.fontSize = 100; //默認字體大小

//若是當前設備寬度大於默認最大寬度，則返回默認最大寬度
_self.actualWidth = function(){
if(_self.width<deviceWidth){return _self.width;}
else{return deviceWidth;}
};

//根據計算公式改變html默認字體大小
document.getElementsByTagName("html")[0].setAttribute("style","font-size:"+(_self.actualWidth()*_self.fontSize)/ _self.width+"px !important");
};
</script>

 

 sass中rem的使用：

在CSS中，實現px和rem轉換很是簡單，但每次使用都需進行計算，因此接下來介紹如何使用Sass實現px和rem之間的計算。

首先聲明變量: $browser-default-font-size: 100px !default;

而後在html根元素中顯示的聲明font-size：html { font-size: $browser-default-font-size; }

接着而後經過@function來實現px轉爲rem計算：

@function rem($px) {
@return $px / $browser-default-font-size * 1rem;
}

在須要轉換時調用函數：height: rem(106px);