手机页面rem响应式布局

手机页面设计稿一般是640px，但是，手机屏幕大小确是不确定的，想做出适应所有手机的手机页面解决方案有两种，rem布局和百分比布局。
这里介绍用rem布局来制作手机页面：
rem是css3中新增加的一个单位值，他和em单位一样，都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算。

js设置不同手机屏幕下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>
    new function() {
        var _self = this;
        var deviceWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;
        console.log(deviceWidth); //hack某些浏览器获取手机屏幕宽度
        _self.width = 640;
        _self.fontSize = 100;
        _self.actualWidth = function() {
            if (_self.width < deviceWidth) {
                return _self.width;
            } else {
                return deviceWidth;
            }
        };
        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之间的计算。

通过@function来实现px转为rem计算：

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

在需要转换时调用函数：height: rem(106);

html中rem的使用：

div和元素的宽高，字体的大小和背景图片都可以用rem
如：

.close{
    width: rem(50);
    height: rem(50);
    font-size: rem(30);
    background:url(../../images/tikuweixin/icon.png) no-repeat ;
    background-size:rem(90) rem(90);
    background-position: rem(-174) rem(-54);
}

但有一点要注意的是rem产生的小数像素问题，这个问题会导致背景图被裁掉一小部分，解决方法是切图时为背景图片留下一定的空白间隙