我想要做的是能够通过编程方式缩放页面,而棘手的部分是我希望媒体查询也以相同的比例缩放。因此,如果我将页面中的所有内容按2倍比例缩放,原来在400px时触发的媒体查询现在应该在800px时触发。
我尝试过以下方法: - 在html或body元素上设置css缩放属性(zoom: 2),但这不会缩放媒体查询。原来在400px时触发的媒体查询仍然会在400px时触发。如果我使用浏览器的缩放控件缩放页面,则媒体查询会成比例缩放,但使用缩放css属性则不会。此外,Firefox不支持缩放,使用transform: scale(2)也无法得到所需的结果。 - 对所有元素使用rem单位,包括媒体查询,然后更改html元素的基础字体大小以按比例缩放所有内容。这对于每个元素都有效,但对于媒体查询则无效。显然,媒体查询中的rem单位使用浏览器的默认字体大小(通常为16px),而不是在html元素上设置的基础字体大小。 - 在媒体查询中使用Calc和CSS变量。我尝试了一些类似于:
我尝试过以下方法: - 在html或body元素上设置css缩放属性(zoom: 2),但这不会缩放媒体查询。原来在400px时触发的媒体查询仍然会在400px时触发。如果我使用浏览器的缩放控件缩放页面,则媒体查询会成比例缩放,但使用缩放css属性则不会。此外,Firefox不支持缩放,使用transform: scale(2)也无法得到所需的结果。 - 对所有元素使用rem单位,包括媒体查询,然后更改html元素的基础字体大小以按比例缩放所有内容。这对于每个元素都有效,但对于媒体查询则无效。显然,媒体查询中的rem单位使用浏览器的默认字体大小(通常为16px),而不是在html元素上设置的基础字体大小。 - 在媒体查询中使用Calc和CSS变量。我尝试了一些类似于:
@media only screen and (max-width: calc(400px * var(--scale-factor))
但目前没有任何浏览器支持在媒体查询中使用 calc 和 css 变量。
我找到的唯一解决方案是完全放弃 CSS 媒体查询,使用 JavaScript 模拟效果,但这需要更多的代码并且不像一种优雅的解决方案。虽然我不介意使用一些 JavaScript 作为解决方案的一部分,但放弃媒体查询并用完全不同的方式实现似乎有点过于极端了,这个本应该很简单的问题。
您有什么建议吗?