REM适配方案--布局

àì夳堔傛蜴生んèń 2022-04-10 20:44 426阅读 0赞

## 页面布局 ##

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

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

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

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

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

## rem布局 ##

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

### 认识Rem（rem是什么） ###

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

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

设置他们的字体大小

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

结果如下  
![字体大小是一致的][20181205135631259.png]  
接着我们在设置body字体元素的大小

body{ 
                font-size: 30px;
            }

效果如下，明显的变化，rem没有变化，em变化了  
![明显em变化了][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;
            }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]  
也就是只要页根元素（html）的字体变化，宽高也会自适应发生变化

### 为什么要用Rem布局 ###

*  当我们要做宽高自适应布局，整体缩放的布局，rem布局比较适合使用，如[苏宁的M端][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;
                }
            }

1.  如果多种设备我们就要写多次配置，还要计算各屏幕的值，此时我们可以使用less，便于我们代码的维护，提高我们的效率
2.  使用less和媒体查询，结合实际情况（苏宁webapp）使用Rem布局  
    ![在这里插入图片描述][20181205154456289.png]

这是我们截取头部的图片，它的设计稿的宽度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;
    }

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

### 总结 ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220411/a3fbae3b5da14d92b67012df0f036d8a.png
[20181205133515149.png]: /images/20220411/241d29e60d7c4959a81a614aec4be32e.png
[20181205135631259.png]: /images/20220411/235537a569734170828bb114e5b5450e.png
[em]: /images/20220411/6a4fe8e0aef74614935993a2a75af97a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220411/5b5b747d9d7f479da56032ac5e4b08e7.png
[M]: https://m.suning.com/
[20181205154456289.png]: /images/20220411/4a226457b1084b2ea4a50b2f6b965e6a.png