rem通過媒體查詢調整不工作在webkit？

我使用後在我的CSS媒體查詢代碼：rem通過媒體查詢調整不工作在webkit？

@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/

來源

2013-02-18 reiter.bene

相關（但不重複，哎呀呀）：在Chrome的REM單位媒體查詢？（ http://stackoverflow.com/questions/12201003/media-queries-with-rem-units-in-chrome） – BoltClock 2013-09-23 12:21:46

我發現rem支持在Chromium（Chrome和Opera）中的越野車。 Chromium是基於webkit的。我不知道Safari。 – Rolf 2014-01-10 19:42:55

您可能會遇到_scaling_錯誤。 https://bugs.webkit.org/show_bug.cgi?id=123012 AFAIK它在iPhone1推出並且從未改變時實施，但您可以使用-webkit-text-size-adjust將其禁用：無 – dotnetCarpenter 2015-03-14 22:33:37

我想你NEDD只是改變你的媒體查詢

@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%; } }

來源

2013-09-23 11:51:16

rem通過媒體查詢調整不工作在webkit？

回答

相關問題