gpt4 book ai didi

html - rem 通过媒体查询调整大小在 webkit 中不起作用?

转载 作者:太空宇宙 更新时间:2023-11-04 13:22:25 25 4
gpt4 key购买 nike

我在我的 CSS 中使用以下代码进行媒体查询:

@media all {html { font-size: 62.5%; }  }/* 62.5%: 1em = 10px */
@media all and (max-width: 1200px) { html,body { font-size: 50%; } }
@media all and (max-width: 1000px) { html,body { font-size: 45%; } }
@media all and (max-width: 800px) { html,body { font-size: 40%; } }

但是当字体大小 > 62.5% 可以使用 webkit 正确调整大小时,大小 <62.5% 只会调整文本的大小,而不是元素的宽度、高度、填充等。

例如:

.loader {
width:38rem;
height:36rem;
position:relative;
}

只会缩放其中的文本,不会缩放元素的宽度和高度。

这个问题只出现在webkit浏览器中,Firefox不会出现:

经过大量研究,我找不到解决这个问题的方法,有什么想法吗?您可以在此处找到现场演示:http://partytube.eu01.aws.af.cm/

最佳答案

我想你只需要改变你的媒体查询

@media  (max-width: 800px) {    html,body { font-size: 40%; }   }
@media (min-width:801px) and (max-width: 1000px) { html,body { font-size: 45%; } }
@media (min-width: 1001px) and (max-width: 1200px) { html,body { font-size: 50%; } }

关于html - rem 通过媒体查询调整大小在 webkit 中不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14939902/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com