undefinedfix
Sign in

Why should I write the font size of this CSS file twice?

olloczky edited in Tue, 27 Sep 2022

The font of this CSS file - Why write two? As shown below, font in media - Size is written once in PX and VW. What's the effect of this?

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
  }
}
3 Replies
amrobx
commented on Tue, 27 Sep 2022

First: the parsing rules of premise CSS are from top to bottom. If the same attribute appears below, the previous one will be overridden; but if the following one goes wrong, the first one will not be overridden

Second: with the above premise, smart developers will use this to deal with compatibility issues.

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

In the above 2-line style, it is obvious that the browser on the second line will make mistakes, and the font size will be 12px. However, in case any browser supports the second line, the font size will be hello;

Here is just an example. No browser will support hello?

neon
commented on Wed, 28 Sep 2022

For compatibility, if the browser does not support VW, the PX line style will take effect

ulwek
commented on Wed, 28 Sep 2022

Red incompatible yellow green compatible green compatible VW compatible view

lock This question has been locked and the reply function has been disabled.