移动端开发--rem和像素如何使用！

刚开始做移动端的开发的时候，大多时候是在使用 像素（PX）来写页面和布局的，但是使用下来，还是有多少不好用！

随之就开始用 rem 来写，rem写的结果是页面放到一些屏幕上，字体过小，如果页面渲染用了rem，但是网站后台编辑器里的字体大小是用像素来做的，这就可能出现一种情况，rem设置的像素要比编辑器里设置的像素要小很多，所以所有的都用 rem 来设置大小，还是有些许问题。

互联网技术，想来想去还是看看阿里是怎么做的？打开淘宝的手机端，他使用的 px+rem混合做的，经过测试确实这种比较好！

下面就具体说下两种 rem 设置大小的方法：

第一种：按照设计稿750的大小来设置：

<style type="text/css">
html{font-size:100px;}
</style>
<script type="text/javascript">
var winW = $(window).width();
if (winW > 750) {winW = 750;}
$('html').css('font-size', winW / 7.5);
$(window).resize(function () {
    winW = $(window).width();
    if (winW > 750) {winW = 750;};
    $('html').css('font-size', winW / 7.5);
});
</script>

设置html的大小为100px，那么页面的 750px 就相当于是 7.5rem； 100px 就是 1rem；1px就是0.01rem；也就是页面上多少像素，转化为 rem 就是除以100 即可；

第二种：按照设计稿540的大小来设置：（淘宝的做法）

<style type="text/css">
html{font-size:54px;}
</style>
<script type="text/javascript">
var winW = "";
$(window).resize(function(){partCom();});
partCom();
function partCom(){
    winW = $(window).width();
    $('html').css('font-size', winW / 10);
};
</script>

设置html的大小为54px；540px就是10rem；54px等于1rem；1px等于1/54像素；这种做的话，多少像素就必须计算出多少rem；

<style type="text/css">
div.jisuan{width: 100%; height:1.4814rem; line-height: 0.6296rem; background:rgba(0,0,0,0.5); position: absolute; top:0px; font-size:12px;}
div.jisuan input{width: 1.8518rem; height: 0.5555rem; line-height: 0.5555rem; font-size:16px; text-indent: 0.1851rem; border:none; outline: none;}
div.jisuan input.px{margin-left: 0.5555rem;}
div.jisuan span.dy{font-size:14px; color:#fff;}
div.jisuan span.px{font-size:24px; color: #fff;}
</style>
<div class="jisuan">
    <div class="pxtorem">
        <input type="text" class="px" value="540">
        <span class="px">px</span>
        <span class="dy">=</span>
        <input type="text" class="rem" value="10">
        <span class="px">rem</span>
    </div>
    <script>
    (function(){
    /* 计算
    540px = 10rem
    1px = (10/540) rem
     */
    $("div.pxtorem input.px").blur(function(){
        $("div.pxtorem input.rem").val(Math.round($("div.pxtorem input.px").val()*(10/540)*10000)/10000);
    });
    })();
    </script>
    <div class="remtopx">
        <input type="text" class="px" value="10">
        <span class="px">rem</span>
        <span class="dy">=</span>
        <input type="text" class="rem" value="540">
        <span class="px">px</span>
    </div>
    <script>
    (function(){
    /* 计算
    10rem = 540px
    1rem = (540/10) px
     */
    $("div.remtopx input.px").blur(function(){
        $("div.remtopx input.rem").val(Math.round($("div.remtopx input.px").val()*(540/10)*10000)/10000);
    });
    })();
    </script>
</div>

总结：总的来说，第一种方法更加方便，也可以用；但是更推荐第二种，参考淘宝的做法来写移动打的页面；