rem

 iPhone6 下面  1rem=75px;

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                if(clientWidth>=750){
                    docEl.style.fontSize = '100px';
                }else{
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
            };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

 

$(function(){
var oHtml=document.getElementsByTagName("html")[0];
var iWidth=document.documentElement.clientWidth;
iWidth=iWidth>750?750:iWidth;
oHtml.style.fontSize=iWidth/10+"px";
})

 

var ratio = windowW/640;
$("html").css("fontSize",100*ratio+"px");
$(window).on("resize",function(){
    var windowW = $(window).width();
    var ratio = windowW/640;
    $("html").css("fontSize",100*ratio+"px");
});

　　

//js
function cal(){
    var windowW =document.documentElement.clientWidth||document.body.clientWidth;
    var ratio = windowW/640;
    if(windowW>640){
        document.getElementsByTagName("html")[0].style.fontSize="100px";
    }else{
        document.getElementsByTagName("html")[0].style.fontSize=100*ratio+"px";
    }
}
cal();
window.onresize = function(){
    cal();
}

　　

ps：附上移动端的判断，可实现判断浏览器为移动端时，自动跳转到手机版页面链接

复制代码
<script type="text/javascript">
 (function() { 
　　 var is_iPd = navigator.userAgent.match(/(iPad|iPod|iPhone)/i) != null;
 　　var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|win ce)/i) != null; 
　　if(is_mobi && window.location.search.indexOf("mv=fp")<0){
　　　　javascript:window.location.href="/wap";
 　　} 
})

</script>

　　

简单阐述下px、em、rem之前的关系

px：像素是相对于显示器屏幕分辨率而言的相对长度单位。pc端使用px倒也无所谓，可是在移动端，因为手机分辨率种类颇多，不可能一个个去适配，这时px就显得非常无力，所以就要考虑em和rem。

em：继承父级的，假设html的font-size默认为16px，body字体大小定义为50%，那么在body里字体大小就是1em=8px了。可当你又定义了一个div，然后把字体设置成了50%，请问，现在div下的1em等于多少？因为继承了父级的值，现在这个div里的1em=4px，这么嵌套下去的话，抱歉，我数学不好！所有rem就出现了。

rem：是em的升级版，rem只会相对html的值，不会受到父级的影响，这样的好处在于：从em里的例子来讲，1rem始终会等于8px。使用的时候不需要重新计算rem此时的大小。rem因为是css3增加的，所以ie8或以下请无视（始终想不明白，为什么国人至今对微软都放弃的ie这么恋恋不舍）。

以上也算是讲清了他们之间的区别和关系，rem更多的运用于移动H5页面的适配使用。

下面来说说怎么更方便的使用rem和自己开文处提到的坑！

之前遇到的坑是这样的。浏览器默认的字体大小都是16px（注意这里），所以要使1rem=10px，那么只要在html选择器中声明Font-size=62.5%（10÷16*100%=62.5%）就可以直接使用1rem=10px单位进行换算，其实这个算法是没有错的。可是，哪里来的自信让每个浏览器默认字体都是16px？？？？反正我也不知道自信哪来。。现在Chrome默认大小可以是12px也可以是16px，那么问题来了，国内浏览器，有几个不是用的谷歌内核。所以html选择器中声明Font-size=62.5%，1rem就等于10px的换算就有点坑爹了，对于我这种一个像素都纠结的人来说，很蛋疼。这坑是我当时买书学h5的时候预留下的后遗症，现在这个毛病还有，因为快和方便 T_T!真是矛盾。。。

坑可以填。rem单位还是可以变的容易换算和精准。所以就去找了些工具和资料。

因为rem是相对html的，那么只要将html选择器设置一个绝对大小的值：比如在html选择器设置font-size：20px；那么1rem=20px（解释下为什么是20而不是其他的，首先10的倍数容易计算，那为什么不是10本身而是20？现在Chrome最小的字体是12px，所以10px是无效的，进一步就取20px）；现在是不是和效果图一个像素都不差？！！！

且要兼容手机各个分别率，使用媒体查询media 可以设置不同的大小，这样在常规的设备中都可以精准到每一个像素。

这么换算来换算去好麻烦有木有！！所有发现了下面的换算工具，妈妈再也不用说我数学题不会做了！

下面是我直接在工具复制过来的现成rem换算适配代码↓（设计稿宽度：640，字体值：20）

@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
 html,body {
 font-size:16.875px;
 }
 }
 @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
 html,body {
 font-size:15px;
 }
 }
 @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
 html,body {
 font-size:12.5px;
 }
 }
 @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
 html,body {
 font-size:11.25px;
 }
 }
 @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
 html,body {
 font-size:10px;
 }
 }
 @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
 html,body {
 font-size:9.375px;
 }
 }
 @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
 html,body {
 font-size:8.4375px;
 }
 }
 @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
 html,body {
 font-size:7.5px;
 }
 }
 @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
 html,body {
 font-size:6.46875px;
 }
 }
 @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
 html,body {
 font-size:6.25px;
 }
 }
 @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
 html,body {
 font-size:5.859375px;
 }
 }
 @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
 html,body {
 font-size:5.625px;
 }
 }
 @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
 html,body {
 font-size:5px;
 }
 }
 @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
 html,body {
 font-size:3.75px;
 }

• rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
• em 单位基于使用他们的元素的字体大小。
• rem 单位基于 html 元素的字体大小。
• em 单位可能受任何继承的父元素字体大小影响
• rem 单位可以从浏览器字体设置中继承字体大小。
• 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
• 在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
• 使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
• 媒体查询中使用 rem 单位
• 不要在多列布局中使用 em 或 rem ,改用%。
• 不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。