rem适配布局（一）
学习目标
（1）能够使用rem单位
（2）能够使用媒体查询的基本语法
（3）能够使用Less的基本语法
（4）能够使用Less中的嵌套
（5）能够使用Less中的运算
（6）能够使用2种rem适配方案
（7）能够独立完成苏宁移动端首页
1.rem基础
（1）rem单位
rem(root em)是一个相对单位，类似于em，em是父元素字体大小
不同的是，rem的基准是相对于html元素的字体大小
例如：根元素(html)设置 font-size = 12px
非根元素设置 width：2rem 换成px表示24px
// 例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
font-size: 12px;
}
p{
/*em相对于父元素字体大小来说的*/
width: 10em;
height: 10em;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
// 例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html{
font-size: 14px;
}
div{
font-size: 12px;
}
p{
/*rem是相对于html的字体大小来说的*/
width: 10rem;
height: 10rem;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
rem的优点是可以通过修改html的文字大小来改变页面元素的大小，可以进行整体控制
// 例3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
html{
/*font-size: 14px*/
font-size: 12px;
}
div{
width: 15rem;
height: 15rem;
font-size: 12px;
background-color: green;
}
p{
width: 10rem;
height: 10rem;
background-color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>