手机页面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);