REM适配方案--布局

页面布局

1. 流式布局
   适用页面特点：一般使用于–左侧固定+右侧自适应；左右固定宽度+中间自适应
   通俗来讲容器百分比自适应
   需求：左边宽高不变，右边宽度随着屏幕变化自适应
   

<div class="box">
        <div class="left">左边固定宽高，右边像液体一样流动div>
        <div class="right">随着屏幕宽度变化而变化div>
    div>

.right如果不设置overflow:hidden;那么宽度将始终占满整个屏幕，呈现上下布局了，流式布局只能做宽度的适配…
2. 响应式布局

一个网站能够兼容多个终端

主要利用了媒体查询，bootstrap提供了栅格系统等也很好的做适配，但高度一般都是固定的,不会随着屏幕的变化而变化…
3. 伸缩布局
在伸缩盒子里面，我们可以给子盒子分配宽度，但无法分配高度

即：flex只给宽度设置，高度不会随着容器的变化而变化

rem布局

REM是相对单位，是相对HTML根元素

认识Rem（rem是什么）

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小

1. 现在.html的body写下两个元素

	<div class="rem">REMdiv>
    <div class="em">EMdiv>

设置他们的字体大小

.rem{
       font-size: 2rem;
}
.em{
      font-size: 2em;
 }

结果如下

接着我们在设置body字体元素的大小

body{
            font-size: 30px;
        }

效果如下，明显的变化，rem没有变化，em变化了

接着我们给文档的html设置字体大小
我们可以发现rem和em一样大小，都是两倍放大

html{
            font-size: 30px;
        }

REM与EM

• rem是单位，由浏览器转换为像素值
• em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小

从上可以看出：rem 单位基于 html 元素的字体大小,由浏览器转换为像素值，具体取决于您的设计中的字体大小设置，是灵活、 可扩展的单位

• rem是灵活的单位，可以控制元素整体放大缩小
  我们继续给我们的页面.rem添加类

.rem{
            font-size: 2rem;
            width: 10rem;
            height: 5rem;
            background:red;
        }

也就是只要页根元素（html）的字体变化，宽高也会自适应发生变化

为什么要用Rem布局

• 当我们要做宽高自适应布局，整体缩放的布局，rem布局比较适合使用，如苏宁的M端
• 一些偏向app类的，图标类的，图片类的，比如淘宝，活动页面，rem比较适合使用- 为什么使用rem不使用em
• 有些人买大屏幕手机可能就是为了让字体看得更大，rem布局就起到了很好的用户体验
  • 对em不是很了解从上面以为rem基于页根元素，em基于body元素 ，其实em不是基于body元素，也不是基于其父元素，只是因为字体的继承，其实em作为容器大小基于当前的字体尺寸
  • 了解了em，如果使用em做，其复杂程度可想而知
  • em牵一发而动全身，某个发生变化,其后代也可能发生变化，维护更难

怎么用Rem布局

既然rem基于html根元素，可以控制元素的整体放大和缩放，做弹性布局一般是基于屏幕的宽度，也就是我们只要通过媒体查询@media或则js控制根元素的字体大小,根据屏幕的宽度大小，相对于根元素设置元素大小，就可以达到我们想要元素的整体适应屏幕的效果。

1. 因为用户可能会禁用掉了js，加上一般来说，都是先加载css在加载js的，所以我们选择使用媒体查询来控制元素的大小
2. 使用媒体查询结合css使用

/*假设的设备  320px */
        @media (min-width: 320px) {
            html{
                font-size: 50px;
            }
        }

3. 如果多种设备我们就要写多次配置，还要计算各屏幕的值，此时我们可以使用less，便于我们代码的维护，提高我们的效率
4. 使用less和媒体查询，结合实际情况（苏宁webapp）使用Rem布局
   

这是我们截取头部的图片，它的设计稿的宽度750px；设计的根元素字体大小为100px，导航栏的高度是90px，宽度是750px；此时导航栏的高度应该设置为90rem/100=0.9rem,
假设设计稿宽度为75px;设计的根元素则10px；这样导航栏高度为9px；依旧是9rem/10=0.9rem
也就是说 100/750 = 10/75(预设基准值（已知）/设计稿宽度（已知）= 设备的基准值（未知）/屏幕宽度（已知）)

---

所以根据主流屏幕，我们使用less配置一套适用的方案

@charset "UTF-8";
//现在主流设备的屏幕宽度
@adapterDeviceList:750px,720px,640px,540px,480px,424px,414px,400px,384px,375px,360px,320px;
//设计稿尺寸(我们拿到的UE图)
@psdWidth:750px;
//预设基准值(根元素)
@baseFontSize:100px;
//设备的种类(我们定义设备的多少)
@len:length(@adapterDeviceList);
//生成各个主流设备对应的字体大小
.adapterMixin(@index) when ( @index > 0){
  @media (min-width: extract(@adapterDeviceList,@index)){
    html{
      font-size: @baseFontSize / @psdWidth * extract(@adapterDeviceList,@index);
    }
  }
  .adapterMixin( @index - 1);
}
.adapterMixin(@len);
//此时我们的苏宁导航栏的容器应该为
.suning{
	width: 100%;
	height: 0.9rem;
	background: #fabc09;
}

<header>
	<div class="suning">div>
header>

这样宽度高度就会随着容器的变化而变化

总结

每种方案都有优缺点，应寻找适合的适配方案