[分享]css3字体大小自适应

现在的网页设计各种设备上访问，缩放，改变字体大小的需求日益突出。而制作响应式页面，字体大小自适应技术也越来越被使用。那么，CSS3有哪些方法可以控制字体大小实现自适应呢？fontsize: 1vw; ...

现在的网页设计各种设备上访问，缩放，改变字体大小的需求日益突出。而制作响应式页面，字体大小自适应技术也越来越被使用。那么，CSS3有哪些方法可以控制字体大小实现自适应呢？

font-size: 1vw;

font-size: 1vh;

font-size: 1vmin;

font-size: 1vmax; 

上面这些单位能够让字体大小沿着浏览器尺寸的变化而自适应。其中vw和vh分别对应Viewport宽和高的百分数，vmin和vmax依据Viewport的两个尺寸最小值或者最大值，选择相应的值来作为一个单位。所以，vw和vh在同一设备上一般具有相同的值，但是他们的比例通常都自适应改变。

@media screen and (min-width: 480px) {
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

@media screen and (min-width: 1200px) {
    body {
        font-size: 20px;
    }
} 

CSS3还提供了页面大小的媒体查询功能。因此可以在同一页面上控制样式在不同的屏幕尺寸下应用不同的字体大小。媒体查询可以依据屏幕宽度，像素比率，设备方向等等条件来实现。

使用CSS3的字体大小自适应技术可以很方便地满足多样化的浏览需求。通过应用以上技术，您可以轻松地实现聪明的字体控制方案，但是也要注意它可能需要更多的CSS代码，以及各种浏览器的兼容性。