02移动端布局

  一、rem

     1、意义：当px固定宽度不能适应不同屏幕尺寸时，布局需要，从而产生rem

     2、rem 和 em 区别

          2.1 rem: root，以根节点（html）作为参照的尺寸

          2.2 em: 根据父级font-size确定大小     1em = 1font-size（父级的 ）

     3、随着屏幕宽度的变化，改变HTML根元素font-size，从而控制rem值，从而达到相应效果（其他HTML子元素width等都是rem）

function autoRem(){
    var html = document.documentElement;     //documentElement返回文档根节点html
    var htmlWidth = html.getBoundingClientRect().width;     //getBoundingClientRect().width 包括width + padding * 2 + border * 2
    html.style.fontSize = htmlWidth / 16 + 'px';     //16 是根据自己页面设定，非固定使用，以方便后续计算为准（iPhone5中320屏幕，刚好可以整除，一个屏幕刚好16rem）
}
//从此，假设iPhone5测试，则html的font-size = 320 / 60 = 20px     则 1rem = 20px

 

二、使用LESS计算rem

     1、less使用方法：

          1.1 安装less运行环境（less是css预编译器，但是浏览器等没有其编译环境，需要将其编译成css文件，从而间接使用css）

               1.1.1 npm install -g less    详见less中文网： http://lesscss.cn/

          1.2 完成less环境安装之后在本地书写需要的less文件，比如style.less

          1.3 打开命令窗口，切换到less文件所在文件夹，编译less成相应css文件     lessc style.less style.css     (lessc  less文件名 css文件名)

 

     2、利用less计算能力，计算rem

@r: 10rem;
.main{
    width: 400/@r;     //400px---->40rem
}

 

三、利用border-sizing布局

     1、量尺寸时，width包含住border等，然后正常设置border

     2、border-sizing: border-box;     //让border在width范围内绘制（content包含了width + padding + border）

 

下章续。。。