笔记

px,em,rem，单位的使用和响应式的实现

px是设置固定值的单位，设置是多少，在不同的分辨率下就是多少；

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。

3. 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。

   
   image.png

rem：使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素

image.png

也可以在js中写一段代码使用rem

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

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

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备

响应式

文件的头部要引入这段代码<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
响应式界面能够适应不同的设备，移动端，平板，pc端的不同分辨率
可以用ui框架中的栅格布局（col-lg/md/sm/xs-xxx），媒体查询（

@media screen and (max-width: 300px) {
   
}
@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

），结合使用rem，写多套样式适应分别率变化较大的设备