我一直在想办法随着父元素大小的变化而改变字体大小。这很可能是由于浏览器大小发生了变化。例如,当我将 Chrome 缩小时,字体会变小,反之亦然。
我在考虑媒体查询,但它也不适合我真正想要的。媒体查询非常适合检测正在使用的设备和所有设备,但不是我想要的样子。我在想答案在于某种 JavaScript,但如果有一个使用 CSS 的答案我会更喜欢。我做了一些研究,但找不到我想要的东西。
最佳答案
您可以使用媒体查询。 我用这个来测试:
@media all and (max-width:2700px) {html {font-size:50px;transition:1s;}}
@media all and (max-width:2000px) {html {font-size:45px;transition:1s;}}
@media all and (max-width:1600px) {html {font-size:30px;transition:1s;}}
@media all and (max-width:1200px) {html {font-size:25px;transition:1s;}}
@media all and (max-width:1100px) {html {font-size:22px;transition:1s;}}
@media all and (max-width: 900px) {html {font-size:18px;transition:1s;}}
@media all and (max-width: 700px) {html {font-size:15px;transition:1s;}}
@media all and (max-width: 500px) {html {font-size:12px;transition:1s;}}
@media all and (max-width: 300px) {html {font-size: 8px;transition:1s;}}
选择的尺寸可能不是最好的,过渡是为了避免在调整窗口大小时从尺寸跳到尺寸。
玩得开心!
关于javascript - 响应式字体大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16952824/