javascript - 响应式字体大小

标签 javascript html css responsive-design

我一直在想办法随着父元素大小的变化而改变字体大小。这很可能是由于浏览器大小发生了变化。例如,当我将 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/

相关文章:

javascript - 如何在 5 分钟不活动后更改页面位置

javascript - 仅当 ES5 strict 中不存在时,如何定义全局变量?

jquery点击复选框问题

html - 如果未指定高度,如何将 div 保持在另一个 div 之下?

css - 定制Disqus

php - AJAX聊天,自动滚动窗口

javascript - 粘性导航栏不起作用

javascript - 如何排除元素类成为 jquery .click() 事件中的目标?

javascript - 为什么当我使用 navbar-fixed-top 时 body 被隐藏在 navbar 后面

Javascript - 从表中删除项目名称?