前言
实现网页字体大小的方式有多种,此处只是说明下,如何使用@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时,就是大的在前面,小的在后面: