更改字體大小不影響@media查詢

我在具有更改字體大小不影響@media查詢

html { 
    font-size: 62.5%; 
}

頁的工作這意味着的1rem = 10px代替1rem = 16px到目前爲止，一切都很好。

問題是它不影響@media queries。

/* 
it should change at 600px and not 960px. 
the @media ignores the 62.5%; 
*/ 
@media (min-width: 60rem) { 
    .el { 
     background: blue; 
    } 
}

檢查此codepen看到的問題。

http://codepen.io/sandrina-p/pen/bqGZjE

我視網膜顯示器上進行測試，與Chrome和Firefox。在Safari上，問題不會發生。

任何解決方案？

來源

2017-02-24 sandrina-p

它正在處理960px。在Windows鉻1920年決議。我已將瀏覽器大小調整爲960像素，並且正常工作。 – locateganesh

我希望它改變在600px，而不是960px，因爲字體大小是62.5％ –

我發現了這個問題。在@media中，您需要使用em，它會始終讀取默認瀏覽器大小，忽略您的自定義font-size。 rem也不會發生這種情況。因此，在這種情況下，您需要設置37.5em（600/16），並且它會在包括safari在內的每個瀏覽器中將600px更改爲600px。

https://zellwk.com/blog/media-query-units/

（...）跨所有四個瀏覽器進行一致的唯一單位是em。除了在Safari上發現的錯誤，em和rem之間沒有任何區別。（...）不幸的是，在第三個實驗中，px媒體查詢仍然保持在400px，如果您打算支持更改瀏覽器字體大小值的用戶，則該操作將不成功。因此，我在這些實驗後的結論是：使用em媒體查詢。

@media screen and (max-width: 37.5em) { 
    .el { 
     background: blue; 
    } 
}

來源

2017-02-24 11:02:46

是的，我也只是在mac safari媒體查詢中發現了使用'rem'只是沒有反映和'em'和'rem'好的研究真的很好。 – locateganesh

-1

試試這個

<div class="el"> 
    hey there 
</div> 

// =========== basic template =========== // 
$safeArea: 1rem; 
body { 
    font-family: sans-serif; 
} 

// ======== actual codepen code ========= // 

html { 
    font-size: 62.5%; 
} 

.el { 
    background: red; 
    font-size: 1.6rem; 
} 

/* it should change at 600 px and not 960px. 
the @media ignores the 62.5%; 
*/ 
@media screen and (max-width: 60rem) { 
    .el { 
     background: blue; 
    } 
}

看到這個codepen - http://codepen.io/anon/pen/aJbxOQ

來源

2017-02-24 10:42:29 grinmax

嗯，nop，它仍然在960px更改，我想改變它在600px –

不是，它不會與你htmlfont-size或您.elfont-size做任何事情。因爲1rem是16px。所以你必須按照16px來計算它。

@media (min-width: 37.5rem) { 
    .el { 
     background: blue; 
    } 
}

這將是您的600px媒體查詢中斷。

來源

2017-02-24 10:51:56 locateganesh

Nop，這樣，如果你打開safari上的codepen，它將渲染375px而不是600px，因爲safari可以讀取62.5％。 –

我想，你不應該用codepen製作的代碼來測試它。只需創建一個本地文件並添加元視口''並測試它。 – locateganesh

更改字體大小不影響@media查詢

回答

相關問題