Javascript 调整优雅解决方案的性能，以调整文本大小，实现流畅/灵敏的设计？_Javascript_Css_Fonts_Responsive Design_Media Queries

Javascript 调整优雅解决方案的性能，以调整文本大小，实现流畅/灵敏的设计？

javascript css fonts responsive-design

Javascript 调整优雅解决方案的性能，以调整文本大小，实现流畅/灵敏的设计？,javascript,css,fonts,responsive-design,media-queries,Javascript,Css,Fonts,Responsive Design,Media Queries,我发现基于视口大小调整文本大小的以下JS解决方案非常优雅：但是，有两个问题：它依赖于正在调整大小的视口。我也想在页面首次加载时触发它，但我是JS的新手我的页面完全使用em值进行编码；这使用px。我如何使用此选项来调整默认的em大小（仅限），然后它将自动向下渗透到页面上的其他每个元素谢谢您需要在正文的加载事件中运行该代码。最简单的方法是通过其onload属性直接设置它： <body onload="var f = function () { document.body.styl

我发现基于视口大小调整文本大小的以下JS解决方案非常优雅：

但是，有两个问题：

它依赖于正在调整大小的视口。我也想在页面首次加载时触发它，但我是JS的新手

我的页面完全使用em值进行编码；这使用px。我如何使用此选项来调整默认的em大小（仅限），然后它将自动向下渗透到页面上的其他每个元素

谢谢

您需要在

正文

的

加载

事件中运行该代码。最简单的方法是通过其

onload

属性直接设置它：

<body onload="var f = function () { document.body.style.fontSize = 0.2 * window.innerWidth + 'px'; }; window.onresize = f; f();">

它的作用是：

创建一个能够动态设置字体大小的函数

将函数设置为

resize

事件侦听器

立即执行该函数

PS：有更优雅的方式来写这个，但既然你有了新的，最好从一个更简单的符号开始

查看其他答案（或放在页面底部）

em本身不是一个尺寸。这是一个百分比写的不同。em为您工作的唯一方式是因为在浏览器中设置了1个基本字体大小（也可能是重置样式表）。浏览器中字体的基本大小通常为16px。因此，此解决方案所做的是通过将基本大小添加到正文中来更改基本大小（将其添加到html中可能更好）

e、 g.

p{font size:1em；}

如果不进行任何重置，则将为16px。1.5em将是24px。

我刚刚忘记提到，如果您愿意，您可以将

px

更改为

em

。但我建议您绝对设置一个默认大小。否则您将取决于用户的浏览器设置。这是有道理的。我可能会使用这个解决方案，但我很好奇您提到的更优雅的解决方案是什么。更优雅的解决方案不是在html文件中编写，而是在单独的JavaScript文件中编写。嗯。。。我想在这里发布几行代码。。。好吧，只要你把脚本放在正文的末尾，就可以从我的代码中得到它。除非有特殊要求，否则我总是把我的脚本放在那里。应该注意到.Gueze基于问题的代码，我尝试做一些类似于

onresize=onload=function（）{document.getElementById（“post”）.style.fontSize=document.getElementById（“icon”）.width+“px”}

其中

post

是按钮的id和

图标

一个div。我试图将按钮字母的大小设置为一个div。不起作用。有什么建议吗？ThanksWidth不是divs上的可用属性。尝试

docum‌getElementById（“icon”）.clientWidth

获取元素的实际渲染宽度，包括填充。您可以在MDN上了解它，以及更多内容。如果你需要更多的帮助，你应该打开一个新的主题（在搜索相关的主题之后），Geuze可以很好地工作，但是由于某些原因，文本的大小是巨大的。无论如何，我会继续寻找。无论如何谢谢你

<body onload="var f = function () { document.body.style.fontSize = 0.2 * window.innerWidth + 'px'; }; window.onresize = f; f();">