这个css文件的font-size为什么要写两遍？

Question

这个css文件的font-size为什么要写两个？
如下所示，media中的font-size，都是px和vw两个单位各写一次，这是起什么作用？

html {
  font-size: 13.33333vw
}

@media screen and (max-width: 320px) {
  html {
    font-size: 42.667px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 321px) and (max-width: 360px) {
  html {
    font-size: 48px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 361px) and (max-width: 375px) {
  html {
    font-size: 50px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 376px) and (max-width: 393px) {
  html {
    font-size: 52.4px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 394px) and (max-width: 412px) {
  html {
    font-size: 54.93px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 413px) and (max-width: 414px) {
  html {
    font-size: 55.2px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 415px) and (max-width: 480px) {
  html {
    font-size: 64px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 481px) and (max-width: 540px) {
  html {
    font-size: 72px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 541px) and (max-width: 640px) {
  html {
    font-size: 85.33px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 641px) and (max-width: 720px) {
  html {
    font-size: 96px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 721px) and (max-width: 768px) {
  html {
    font-size: 102.4px;
    font-size: 13.33333vw
  }
}

@media screen and (min-width: 769px) {
  html {
    font-size: 102.4px;
    font-size: 13.33333vw
  }
}

Answer 1

第一：前提
css的解析规则，是从上到下的，如果下面出现相同的属性，就会覆盖之前的；但是如果下面的出错了，那么不会覆盖第一个

第二：作用
有了上面的前提，聪明的开发者就会用这个来处理 兼容性的问题。

font-size:12px;
font-siez:hello;

上面的2行样式，很明显，第二行浏览器会出错，那么字体的大小就会是 12px; 但是万一哪个浏览器支持第二行，那么字体大小就是 hello;

这里只是举个例子，应该没有哪个浏览器会支持 hello ?

Answer 2

为了兼容，如果浏览器不支持vw，px那一行样式就会生效

Answer 3

红的不兼容 黄绿的部分兼容 绿的兼容

vw兼容性查看