开发者学堂课程【移动 Web 前端开发：rem-适配方式】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8492
rem- 适配方式
内容介绍
一、流式布局适配
二、rem 适配范例
一、流式布局适配
rem 定义：是一个单位，是基于根元素 html 元素的字体大小。
新建 02 rem-适配方式.html
设置 header 里的 meta 标签，变为移动端适配。
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<title>rem 适配</title>
<style>
body{
margin:0;
padding:0;
}
header{// header 在做移动端适配时一般是流式布局适配方式。
width:100%;
height:50px;
line-height:50px;
text-align: center;
font-size:24px;
color:#fff;
background:red;//背景颜色是红色
}
</style>
</head>
<body>
<header>购物车<header>// header 一般作导航，顶部通栏。这里是需要编写一个自适应的购物车导航。
</body>
</html>
上述是编写了一个自适应的导航，把它放在移动端，设置在 iphone4 设备上，以上布局方式是流式布局的适配方式。
流式布局适配方式的特点是，可以达到宽度的适配，但是内容没有自适应改变，高度也没有自适应改变。
主要适配的是宽度，排除一些情况：图片本身具有高宽自适应的能力，比如 img ，宽度固定了百分比，高度不是固定的，这就是一个自适应的图片。平常的 div 没有能力达到自适应的方案。
流式布局，宽度在拉伸时，高度和内容没有改变，但是 img 高宽都可以改变。
二、rem 适配范例
rem 适配方式，可以达到高宽都自适应，内容也可以自适应，和 img 是类似的，img 当宽度是固定时，高度是自动的。
Img 是>等比例缩放。在流式布局中只有宽度是自适应的，高度和内容不发生改变，所以流式布局不是等比例缩放。rem 适配方式可以做到等比例缩放适配。
1、 目前所有的单位是 px，px 是固定像素。html 大小是是50 px，
用 rem 单位把所有的 px 替换掉。
header{
width:100%
height:1rem;
line-height:1rem;
text-align:center;
font-size:0.48rem;
color:#fff;
background:red;
}
html{
font-size：50px；//定义字符大小
2、 刷新页面，不会影响布局。
此时 html 的大小是固定的。html 中
font-size：50px；决定了页面上所有使用 rem 为单位的基准值。当改变 rem 的基准值 html 的字体大小时，页面上的容器会等比例缩放。
这样达到了根据不同的设备适配效果。
比如，目前是大小为320的设备，设备大小改变为640时，导航栏变为目前的两倍大。这个即为等比例适配。此时 html 相当于一个开关，开关调的值越大，页面显示的内容就越大。
3、 适配，假设 320px 的设备设置的字体大小是 50px，那么 640px 的设备设置的字体大小应该是 100px，这是页面上的内容等比例缩放的一个过程。
4、使用媒体查询完成以上的适配方案
@media(min-width:320px){
html{
Font-size:50px
}
}
@media(min-width:640px){//
html{
Font-size:100px
}
}
当查找到屏幕最小宽度为 320px 时 font-size 大小为 50px，当查找到屏幕最小宽度为 640 px 时 font-size 大小为 100px，这就完成了两种适配方案。
5、适配移动端主流设备,举例：适配 iphone6 宽度为375px。
@media(min-width:375px){
html{
font-size:58.59375px//利用公式375/640*100计算得来
}
}
主流设备还有很多，这里可以使用 Less 辅助进行适配，less 具备计算功能和混入函数概念，通过定义函数完成更多设备的适配。
@media(min-width:320px){
html{
Font-size:50px
}
@media(min-width:375px){
html{
font-size:58.59375px
}
@media(min-width:640px){
html{
font-size:100px
}
}
这是媒体查询的一种方式。切换不同的手机设备，发现实现了自适应。切换到 iPhone 4，header 高度是 50px，切换到 iPhone 6，header 高度是58.59375，切换到屏幕大小 640px，header 高度为 100px。所有的内容都实现了等比例缩放适配。
