rem单位

rem单位

rem基础

px是固定单位，不同分辨率下效果不一样，导致网页布局出现偏差。

em是根据父元素来改变字大小

rem是根据根元素html来改变字体大小，只要改变了根元素的font-size就可以改变所有字体的大小。

1,

html{font-size:20px;}

body{6rem;}

此处1rem=20px

2,

html{font-size:62.5%;}

body{6rem;}

此处1rem=10px;因为默认1rem=16px;

10/16=62.5%

rem跟随分辨率而变化的方法

我们的目的是分辨率不同，字体大小也不同，即适应屏幕分辨率。那么怎样才可以让rem的大小随着分辨率而变化呢？

1，media query，这个不是通用性方法，根据常用的分辨率制定rem。

   html {font-size : 20px;}
    @media only screen and (min- 401px){
        html {font-size: 25px !important;}
    }
    @media only screen and (min- 428px){
        html {font-size: 26.75px !important;}
    }
    @media only screen and (min- 481px){
        html {font-size: 30px !important; }
    }
    @media only screen and (min- 569px){
        html {font-size: 35px !important; }
    }
    @media only screen and (min- 641px){
        html {font-size: 40px !important; }
    }

2，js方法

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

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

其他布局方法

1，流式布局

宽度用百分比；高度用px单位，即高度固定。大分辨率下变形。

当然可以让高度值为rem单位；宽度也要注意兼容性问题。

2，限定宽度

固定的320px，大分辨率下，两边留白。不提倡。

3，响应式

不了解

道听途说：直接从web page直接转换为web app。对大公司来说工作量大，维护难，中小企业可以使用，节约成本。

4，设置viewport，缩放

<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no" />

效率高，效果也不错。