第28车厢-vw很好用我知道!但不小心就踩雷捏！

本篇介绍CSS单位，需要小心使用的观念

单位介绍

%: 相对父层的大小比例
vw(view port width):相对於视窗的宽;
vh(view port height):相对於视窗的高

定义width和height接收视窗的高和宽JS方法

window.innerWidth();
window.innerHeight();

首先介绍好处的部分

vw好用之处

随着视窗宽度的不同改变其大小

例如:我们可以用在字体上
HTML

  <header>
    <h1>标题:快搭上姐姐的`微`前端便车</h1>
  </header>

CSS

一般来说我们会设font-size为XXpx

    header{
      height: 50px;
      background-color: black;
      color: #fff;
    }
    h1{
      font-size: 24px;
    }

但我们设置header限制高度呢?看看我们的标题会发生什麽事?

▲发生，如果缩小萤幕到一个程度，标题会换行，那我们不想要换行怎麽办?
这时候我们可以将h1设置vw值

h1{
  font-size: 5vw; 
}

这样缩小时，就不会换行;

但是！放大时，因为刚刚vw的特点"视窗宽度的不同改变其大小"如果萤幕变大时，他的字体也大到不行捏!
这时候我们就可以改为一个范围，当萤幕大於多少时...走px;当小於多少时走vw;

@media (min-width: 960px) {
  h1,{
   font-size: 24px;
  }
}
@media (max-width: 480px) {
  h1,{
   font-size: 5vw; 
  }
}

上面的写法，你也可以改为这种新写法 ▼

min()

定义了一个数学运算的最小值
IE无法支援

想了解可看文章後面的延伸阅读

   h1{
      font-size: min(5vw, 24px); //宽度最大为 24px，否则就使用 5vw
    }

这样就解决啦！

好，接着我们来看，为什麽还是尽量不要使用呢?

vw 雷处

首先，我们先拜读一下《width & height - 金鱼都能懂的CSS必学属性》中提到

100% 不等於 100vw

当我们对一个物件设定 width: 100%; 的时候，基本上该物件宽度将会等於是父层内容的『可运用空间』

而width: 100vw的时候，该物件的大小将会等於是百分之百的「视窗」宽度，也就是 vw 中的 v 所指的「viewport」，视窗宽度中是不包含卷轴在内的，也就是说 100vw 会等於是视窗的左边缘到右边缘，那麽当你的视窗出现卷轴时会怎麽样呢？这时你的宽度就会因为卷轴的关系，导致宽度过宽，而让你的画面出现了横向卷轴。但 width: 100% 却不会有这问题，因为它的宽度是父层的可用空间，而非视窗的宽度。

▲ 你各位阿～～这样有读懂吗？不懂没关系，我们来看一下刚刚看到的范例影片

如上影片，上下分为两个区域

HTML

  <div class="box-wrap">
      <div class="box"><p>box 25vw</p></div>
      <div class="box"><p>box 25vw</p></div>
      <div class="box"><p>box 25vw</p></div>
      <div class="box"><p>box 25vw</p></div>
  </div>

  <div class="box2-wrap">
    <div class="box"><p>box 25%</p></div>
    <div class="box"><p>box 25%</p></div>
    <div class="box"><p>box 25%</p></div>
    <div class="box"><p>box 25%</p></div>
  </div>

CSS

外层用flex，让内层并排，超过宽度会下一排所以设了flex:wrap;
且因为要分4个，所以100/4 = 25，但分别使用
- 第一排呢使用25vw
- 第二排呢使用25%

    .box-wrap , .box2-wrap {
      display: flex;
      flex-wrap:wrap;
    }

    .box-wrap .box{
      width:25vw;
      height: 30vh;
      background-color: aqua;
    }

    .box-wrap .box:nth-child(odd) {
      background-color: rgb(161, 161, 161);
    }
    
    .box2-wrap .box{
      width:25%;
      height: 30vh;
      background-color: rgb(154, 199, 71);
    }

    .box2-wrap .box:nth-child(odd) {
      background-color: rgb(223, 76, 236);
    }

▲再看一次，好像没什麽差别喔?

那我们再先了解一下宽度计算