vue的自适应布局（%）

目录

1. px与视口
2. %
3. 媒体查询
4. rem
5. vm/vh

一. 百分比

当浏览器的宽度或者高度发生变化时，通过百分比单位，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。
为了了解百分比布局，首先要了解的问题是：
css中的子元素中的百分比（%）到底是谁的百分比？
直观的理解，我们可能会认为子元素的百分比完全相对于直接父元素，height百分比相对于height，width百分比相对于width。
当然这种理解是正确的，但是根据css的盒式模型，除了height、width属性外，还具有padding、border、margin等等属性。

那么这些属性设置成百分比，是根据父元素的那些属性呢？
此外还有border-radius和translate等属性中的百分比，又是相对于什么呢？
下面来具体分析。

1. 百分比的具体分析
（1）子元素height和width的百分比

子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height。比如：

<div class="parent">
  <div class="child"></div>
</div>

(2) top和bottom 、left和right
子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，
同样子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度。

（3）padding
子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
举例来说：

.parent{
  width:200px;
  height:100px;
  background:green;
}
.child{
  width:0px;
  height:0px;
  background:blue;
  color:white;
  padding-top:50%;
  padding-left:50%;
}

子元素的初始宽高为0，通过padding可以将父元素撑大，上图的蓝色部分是一个正方形，且边长为100px,说明padding不论宽高，如果设置成百分比都相对于父元素的width。

（4）margin
跟padding一样，margin也是如此，子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width。这里就不具体举例。

（5）border-radius
border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，举例来说：

<div class="trangle"></div>
<!--设置border-radius为百分比：-->
.trangle{
  width:100px;
  height:100px;
  border-radius:50%;
  background:blue;
  margin-top:10px;
}

除了border-radius外，还有比如translate、background-size等都是相对于自身的，这里就不一一举例。

2. 百分比单位布局应用
百分比单位在布局上应用还是很广泛的，这里介绍一种应用。
比如我们要实现一个固定长宽比的长方形，比如要实现一个长宽比为4:3的长方形,我们可以根据padding属性来实现，因为padding不管是垂直方向还是水平方向，百分比单位都相对于父元素的宽度，因此我们可以设置padding-top为百分比来实现，长宽自适应的长方形：

<div class="trangle"></div>
<!--设置样式让其自适应：-->
.trangle{
  height:0;
  width:100%;
  padding-top:75%;
}

通过设置padding-top：75%,相对比宽度的75%，因此这样就设置了一个长宽高恒定比例的长方形.

3. 百分比单位缺点
如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：
（1）计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
（2）从小节1可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。 比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等， 造成我们使用百分比单位容易使布局问题变得复杂。