rem布局方式

1. rem单位 与 em单位区别

rem (root em)是一个相对单位，类似于em.

• em是父元素字体大小。
• rem的基准是相对于html元素的字体大小。

<div class="one">123</div>
<div class="two">123</div>

/* 根html 为 12px */
html{
	font-size: 12px;
}
body{
  	font-size: 16px;
}
.one{
  	font-size: 2rem;  /* 此时div.one的字体大小为24px */
}
.two{
  	font-size: 2em;   /* 此时div.one的字体大小为32px */
}

2. 移动端开发rem布局

1. 媒体查询

• 使用 @media查询，可以针对不同的媒体类型定义不同的样式
• @media 可以针对不同的屏幕尺寸设置不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

/* 媒体查询语法 */
@media mediatype and|not|only (media feature) {
    CSS-Code;
}

使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配。

html{
	/* 默认50px 适应PC端 */
    font-size: 50px;
}
/* 我们把屏幕尺寸划分为15等分 */
@no: 15;  /* 利用less语法定义变量 */
@media screen and (min-width:320px) {
    html{
        font-size: (320px / @no);
    }
}
@media screen and (min-width:360px) {
    html{
        font-size: (360px / @no);
    }
}
@media screen and (min-width:375px) {
    html{
        font-size: (375px / @no);
    }
}

@media screen and (min-width:400px) {
    html{
        font-size: (400px / @no);
    }
}