这些天在帮客户改一个网站，他的要求是 让字体随窗口缩放自动调整大小 

字体随窗口缩放自动调整大小？你见过吗？我在互联网前端混了10多年，说真的，还真没见过呢！在网上搜索了很多文章，讲到px、em、rem这些名词。px是固定不变的，em和rem是相对单位，是可变的？！然后我试了！em、rem都试了，却是怎么拉伸窗口文字大小都不会变的。

这真是难倒我了。研究了好久，终于搞清楚了。

px、em、rem都是长度单位。也都是相对单位！

px像素，是相对于整个屏幕分辨率的一个单位。

em，是相对于它的父级元素的一个单位。

rem，是相对于html根目录的一个单位。

★ px的话，根据设备屏幕分辨率的不同，肉眼可见的大小会不同。比如同时12px的字体，1920分辨率的屏幕看，就会比较小。如果分辨率是1600,1280,1024。。。文字大小也会增大。所以px作为单位的固定不变，也是相对的。

★ em的话呢，它是根据它的父级元素来定的。比如它的父级元素是14px，那么1em就是14px,2em就是28px，以此类推。

★ rem呢，它是根据html根目录来定的。比如html设置了字体大小是10px，那么其他元素如果使用的是rem作为单位，比如是1rem，就是10px，1.5rem，就是15px。它是相对根目录大小决定的，跟父级元素就没什么关系了。

所以不管你使用的是哪个作为数值单位，只要设备不变，只是拉伸屏幕窗口，字体的大小都不会跟着改变。

那如果我还是想要自适应窗口，想要字体跟随着窗口变化改变呢？

那么还是那个老方法，用media媒体查询窗口大小呀！

.example {
    padding: 20px;
    color: white;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .example {background: red;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .example {background: green;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .example {background: blue;}
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .example {background: orange;}
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .example {background: pink;}
}

如上，这个方法咱们用了很多年，就不多说了哈。

那么用哪个作为单位更好呢？我觉得这个没有定论，哪个用得好，用得顺手就哪个吧！

还有一个忘记说了，如果没有给html或者body设定初始值，那么系统默认字体大小是16px哈！