使用@media实现网页字体大小自适应

前言

实现网页字体大小的方式有多种，此处只是说明下，如何使用@media实现相应需求。

相关知识点

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。

具体的相关知识点可以参考菜鸟教程：https://www.runoob.com/cssref/css3-pr-mediaquery.html

实例

需求：当页面不是F11全屏时，指定div中的span内字体大小为13.5px，当进行F11全屏后，对应字体大小得改成15.5px

实现方式

#middle-right-container span {
    font-weight: bold;
    font-size:13.5px;
}
...
...
...
// 观察发现浏览器全屏后的height为864px，所以此处写863px，意思就是当浏览器的高度大于863px后就执行下面设置，修改字体大小（注意，不一定非得写863px）
@media screen and (min-height: 863px){
    #middle-right-container span {
        font-size:15.5px;
    }
}

注意点

1：使用min-width时，小的在前面，大的在后面；

2：使用max-width时，就是大的在前面，小的在后面：

随手点赞一次，运气增加一份