css字体不能缩小,CSS字体大小在％不降低，当我们缩小浏览器窗口大小

如果你是，这是唯一的CSS原型的证明：

html { font-size: 62.5%; }

body { font-size: 1em;}

@media (max-width: 300px) {

html { font-size: 70%; }

}

@media (min-width: 500px) {

html { font-size: 80%; }

}

@media (min-width: 700px) {

html { font-size: 120%; }

}

@media (min-width: 1200px) {

html { font-size: 200%; }

}

更新： 在评论@dystroy问起我的方法和neccessity的平滑写1200条规则提供模拟JavaScript的方式，但我想到了成千上万的规则，并且发现另一种方法是为每个字体大小的整数值编写少量规则。该方法有权存在，因为浏览器不支持属性font-size的非整数值，这就是为什么将1200字体从12更改为16的规则不可行，因为浏览器只能实现5(12,13 ，14，15，16)：

/* for smoothness on the edges of the rules

when font-size is changing */

.example { transition: all 0.3s ease-out; }

@media (min-width: 1000px) {

.example { font-size: 12px; }

}

@media (min-width: 1100px) {

.example { font-size: 13px; }

}

@media (min-width: 1200px) {

.example { font-size: 14px; }

}

@media (min-width: 1300px) {

.example { font-size: 15px; }

}

@media (min-width: 1400px) {

.example { font-size: 16px; }

}