前言

實現網頁字體大小的方式有多種，此處只是說明下，如何使用@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時，就是大的在前面，小的在后面：

隨手點贊一次，運氣增加一份

總結

以上是生活随笔為你收集整理的使用@media实现网页字体大小自适应的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。