根據關于 rem 值的CSS 值和單位模塊第 3 級：
等于根元素上 font-size 的計算值。當在根元素的 font-size 屬性上指定時，rem 單位指的是屬性的初始值
但是，我@media甚至可以使用查詢來更改選擇器的font-size值:root，并且可以使用rems 中的數量作為斷點。
所以在我看來，@media查詢“讀取”的值1rem以設定斷點，但如果其中有一個:root {}規則集，它也會“設定”的值1rem，從而導致定義中的回圈。
我錯過了什么？
舉個例子，在下面的代碼片段中，如果您圍繞斷點調整視窗的大小（JSFiddle 上的相同代碼片段，面板的調整大小更容易一些），您會看到橢圓的大小（有width: 50rem;）發生了變化, 表示1rem越過斷點時含義發生變化, 表示我們真正從斷點切換:root { font-size: 0.5em; }到:root { font-size: 2rem; }越過斷點。
據我了解，這最終意味著我們成功地改變font-size了:root元素的計算值。
如果是這樣的話，怎么可能使用rems 作為媒體查詢的斷點呢？
觀察下面代碼片段的結果，我想說斷點發生在相同的視口寬度上，而不管規則集中如何font-size更改。:root {}
標準的哪一部分解釋了我所觀察到的？
:root {
box-sizing: border-box;
margin: 0;
font-size: 0.5rem;
}
.shape {
content: "";
display: block;
background-color: red;
border-radius: 100%;
width: 50rem;
height: 10rem;
}
@media (min-width: 50rem) {
.shape {
background-color: blue;
}
:root {
font-size: 2rem;
}
}<div class="shape">
</div>
ciaouj5u.com熱心網友回復：
從相同的規范：
當在元素背景關系之外使用時（例如在媒體查詢中），這些單位指的是與字體屬性的初始值相對應的計算字體度量。
很50rem簡單50*16px = 800px
:root {
box-sizing: border-box;
margin: 0;
font-size: 0.5rem;
}
.shape {
content: "";
display: block;
background-color: red;
border-radius: 100%;
width: 50rem;
height: 10rem;
}
@media (min-width: 50rem) {
.shape {
background-color: blue;
}
:root {
font-size: 2rem;
}
}
@media (min-width: 800px) {
.shape {
outline:10px solid green;
}
}<div class="shape">
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/419788.html
標籤：