CSS的響應式設計是一種讓網站的頁面元素在不同的設備或屏幕尺寸下自動適應改變的技術。在響應式設計中,字體大小也需要根據不同的屏幕尺寸自動調整。
/* CSS代碼 */ @media screen and (max-width: 480px){ p { font-size: 14px; } } @media screen and (min-width: 481px) and (max-width: 768px){ p { font-size: 16px; } } @media screen and (min-width: 769px) and (max-width: 1024px){ p { font-size: 18px; } } @media screen and (min-width: 1025px) { p { font-size: 20px; } }
在上述代碼中,使用了@media查詢來針對不同的屏幕尺寸設置不同的字體大小。在屏幕尺寸小于等于480px時,字體大小為14px;在屏幕尺寸在481px到768px之間時,字體大小為16px;在屏幕尺寸在769px到1024px之間時,字體大小為18px;在屏幕尺寸大于1025px時,字體大小為20px。
通過這些設置,文字的大小可以根據不同的屏幕尺寸動態地改變,從而使文字在不同的屏幕尺寸下都能夠保持合適的大小。
上一篇css響應式屏幕分辨率
下一篇css和表格有什么區別