Vue前端面试题总结响应式布局详解（一）

￡神魔★判官ぃ 2021-07-24 16:13 1408阅读 0赞

**1、 响应式布局如何实现**

> 我们如何理解响应式布局  
> 响应式布局是为了在开发中网站适应不同分辨率 不同设备的下提供的方法

**1.1 常见的响应式布局分别有**  
1.百分比布局  
2.利用媒体查询（css3新增特性 @media）  
3.rem 响应式布局  
4.vw vh 响应式布局  
5.利用弹性盒子 Flex 布局

**百分比布局**  
利用相对于父元素的设置 子元素会随着父元素的设置而改变  
是不是这样理解有点难  
到底是对于那个父元素的设置会导致根元素的改变

> 子元素的height或width中使用百分比，是相对于子元素的直接父元素，  
> width相对于父元素的width，height相对于父元素的height；  
> 子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。跟padding一样，margin也是如此，子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width；

**媒体查询**  
@media是css3提供的一种适应不同分辨率下改变样式的方法  
使用@media媒体查询可以针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果。举例来说：

@media screen and (max-width: 960px){ 
        body{ 
          background-color:#FF6699
        }
    }
    
    @media screen and (max-width: 768px){ 
        body{ 
          background-color:#00FF66;
        }
    }
    
    @media screen and (max-width: 550px){ 
        body{ 
          background-color:#6633FF;
        }
    }
    
    @media screen and (max-width: 320px){ 
        body{ 
          background-color:#FFFF00;
        }
    }

上述的代码通过媒体查询定义了几套样式，通过max-width设置样式生效时的最大分辨率，上述的代码分别对分辨率在0～320px，320px～550px，550px～768px以及768px～960px的屏幕设置了不同的背景颜色。

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片。比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现。

但是媒体查询的缺点也很明显，如果在浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。

**rem响应式布局**  
首先来看，什么是rem单位。rem是一个灵活的、可扩展的单位，由浏览器转化像素并显示。与em单位不同，rem单位无论嵌套层级如何，都只相对于浏览器的根元素（HTML元素）的font-size  
**如何动态使用rem布局**  
rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。  
因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可。

function refreshRem() { 
        var docEl = doc.documentElement;
        var width = docEl.getBoundingClientRect().width;
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }
    win.addEventListener('resize', refreshRem);

**当然rem布局也有缺点**  
通过rem单位，可以实现响应式的布局，特别是引入相应的postcss相关插件，免去了设计稿中的px到rem的计算。rem单位在国外的一些网站也有使用，这里所说的rem来实现布局的缺点，或者说是小缺陷是：  
在响应式布局中，必须通过js来动态控制根元素font-size的大小。

> 也就是说css样式和js代码有一定的耦合性。且必须将改变font-size的代码放在css样式之前

**vw vh布局**

什么是vw/vh ?

css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位

<table> 
 <thead> 
  <tr> 
   <th>单位</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>vw</td> 
   <td>相对于视窗的宽度，视窗宽度是100vw</td> 
  </tr> 
  <tr> 
   <td>vh</td> 
   <td>相对于视窗的宽度，相对于视窗的高度，视窗高度是100vh</td> 
  </tr> 
  <tr> 
   <td>vmin</td> 
   <td>vw和vh中的较小值</td> 
  </tr> 
  <tr> 
   <td>vmax</td> 
   <td>vw和vh中的较大值</td> 
  </tr> 
 </tbody> 
</table>

**弹性盒子 Flex 布局**  
[菜鸟教程官网][Link 1]

[Link 1]: https://www.runoob.com/w3cnote/flex-grammar.html