更改浏览器默认字体大小后是否要调整页面布局?

时间:2019-06-04 00:42:52

标签: javascript html css

我一直在努力尝试一种布局,当用户更改浏览器的默认字体大小时,该布局会自动(没有JS)进行调整。即使在扩展API中,也没有事件表明用户更改了默认字体大小。

为了解决这个问题,在窗口模糊时,记录屏幕外元素的宽度,并在聚焦时将元素的大小与记录的大小进行比较。如果有更改,则会再次运行布局功能。这样就生成了所需的布局,但是还存在一个问题,即浏览器需要花费一些时间才能识别出发生了更改。这样,我的意思是代码不错,但是除非使用500ms的setTimeout来延迟查询元素几何的代码的运行,否则布局将是错误的。 offsetHeight所查询的焦点与500ms之后所查询的焦点不同。

我想也许是因为我在JS中完成了所有这些工作,应该让浏览器执行它。因此,我开始学习CSS中的calc并在媒体查询中使用它,这使我想到了question,它涉及媒体查询中rem的确定。提到的问题似乎是浏览器始终使用16px来确定rem,而不是对根或html元素中的字体大小(例如常见的62.5%)进行调整。我以为可以通过在媒体查询中使用calc来解决此问题。

我在1920像素宽的大屏幕上进行了以下测试:如果使用191.9rem,则会应用媒体查询中的样式,而不是192.0rem。因此,对于像素来说似乎是准确的。

@media ( width > calc( 192.0rem * 0.625 ) )

但是,当浏览器的默认字体大小更改时,它不会按预期进行调整。例如,由于屏幕为1920px宽,因此基本字体为16px,因此不应应用媒体查询样式。但是,如果将基本字体减小到小于16像素,则应应用媒体查询样式,因为rem小于10像素,包括62.5%的调整,但不是。

但是,如果将基本字体保留为小于16像素,然后刷新屏幕,则将按原样应用媒体查询样式。因此,似乎仍然存在浏览器反映新几何图形的必要延迟的问题。浏览器并不总是使用16px,而是在几何图形完全更新之前进行媒体查询,这与我在使用JS之前遇到的问题相同,为什么需要500ms的延迟。

我试图通过代码段说明这一点,但是我不知道它将在您的浏览器中显示多少宽度,因此,它可能不适用于所有人。另外,代码段容器似乎也不会更改为默认字体大小。尽管如此,这个想法仍然存在。当浏览器的默认字体大小减小到16px以下时,div.affected的颜色将从黄色变为蓝色。但不会更改,只有重新加载页面后才能更改。

该代码段对我有用。默认字体大小为16px时,两个框均为蓝色。将默认字体大小更改为10px,然后立即返回此页面,两个框仍然为蓝色。刷新页面并再次运行该代码段,受影响的div将为黄色。反之亦然。我希望div.affected更改字体大小时更改。我添加了文本,因此您可以看到不是因为代码段本身没有通过观察'A'的大小来响应字体大小的变化。

由于文本大小是在更改字体大小时更新的,并且无需重新加载,因此,这也许是更好的答案的一部分,也就是说,不是在聚焦时查询屏幕外代理元素的大小,而是查询文本的字体大小。也许可以将500ms减少为零来确定是否发生了更改,如果是,则在查询以重置布局之前等待500ms。如果不久之后没有收到更好的主意,我会进行测试。尝试过,如果使用getComputedStyle查询字体大小,仍然需要延迟。

我的问题是,在JS或CSS和媒体查询中,有没有使用calc的方法,有没有办法做到这一点并避免延迟?

我让它在JS中有延迟,但是页面必须显示但不可见,然后等待500毫秒,然后执行计算并使页面再次可见。我正在寻找一种不需要延迟的方法,因为CSS媒体查询似乎存在相同的问题,除非延迟后使用JS添加类,否则媒体查询将根本无法工作。

谢谢您考虑我这个令人困惑的问题。

div { width: 100px; height: 100px; background-color: rgb(73,110,147); margin: 10px;text-align: center; }

div.unaffected { font-size: 48px; }

div.affected { font-size: 3.0rem }

@media ( width > calc( 79.5rem* 0.625 ) ) { div.affected { background-color: yellow; } }
<div class="unaffected">U</div>
<div class="affected">A</div>

0 个答案:

没有答案