Resizing Font Size Proportionally to DIV Size
When building a web layout that should adapt to various screen sizes, it's crucial to ensure that the text remains readable at all resolutions. A common issue is that text may not resize proportionally to the container's dimensions.
Question:
Solution:
This solution utilizes CSS3 alone, eliminating the need for JavaScript:
Pure CSS3 Approach:
@media all and (min-width: 50px) { body { font-size:0.1em; } }
@media all and (min-width: 100px) { body { font-size:0.2em; } }
@media all and (min-width: 200px) { body { font-size:0.4em; } }
@media all and (min-width: 300px) { body { font-size:0.6em; } }
@media all and (min-width: 400px) { body { font-size:0.8em; } }
@media all and (min-width: 500px) { body { font-size:1.0em; } }
@media all and (min-width: 600px) { body { font-size:1.2em; } }
@media all and (min-width: 700px) { body { font-size:1.4em; } }
@media all and (min-width: 800px) { body { font-size:1.6em; } }
@media all and (min-width: 900px) { body { font-size:1.8em; } }
@media all and (min-width: 1000px) { body { font-size:2.0em; } }
@media all and (min-width: 1100px) { body { font-size:2.2em; } }
@media all and (min-width: 1200px) { body { font-size:2.4em; } }
@media all and (min-width: 1300px) { body { font-size:2.6em; } }
@media all and (min-width: 1400px) { body { font-size:2.8em; } }
@media all and (min-width: 1500px) { body { font-size:3.0em; } }
@media all and (min-width: 1500px) { body { font-size:3.2em; } }
@media all and (min-width: 1600px) { body { font-size:3.4em; } }
@media all and (min-width: 1700px) { body { font-size:3.6em; } }Explanation:
These media queries dynamically adjust the font size based on the available screen width in increments of 100px, ensuring a font size that remains legible and visually appropriate.
以上是在響應式網頁設計中，如何依容器大小按比例縮放字體大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
