【发布时间】：2019-02-26 21:29:38
【问题描述】：
媒体查询可以嵌套多少层？与样式表根目录中的查询相比，嵌套媒体查询是否有任何限制？
我已经阅读了这个answer。
【问题讨论】：
-
如果您已投票结束此问题，请发表评论
标签： html css media-queries
【发布时间】：2019-02-26 21:29:38
【问题描述】：
我没有找到任何官方资源（这里是CSS Conditional Rules Module Level 3的规范）。所以我试了一下。在 Chrome 中，我们至少可以嵌套 40 层。出于任何实际原因，这应该足够了。
@media screen and (max-width: 2001px) {
body {
background-color: gold;
}
@media screen and (max-width: 2002px) {
body {
background-color: silver;
}
@media screen and (max-width: 2003px) {
body {
background-color: goldenrod;
}
@media screen and (max-width: 2004px) {
body {
background-color: gold;
}
@media screen and (max-width: 2005px) {
body {
background-color: silver;
}
@media screen and (max-width: 2006px) {
body {
background-color: goldenrod;
}
@media screen and (max-width: 2007px) {
body {
background-color: gold;
}
@media screen and (max-width: 2008px) {
body {
background-color: silver;
}
@media screen and (max-width: 2009px) {
body {
background-color: goldenrod;
}
@media screen and (max-width: 2010px) {
body {
background-color: green;
}
@media screen and (max-width: 2011px) {
body {
background-color: gold;
}
@media screen and (max-width: 2012px) {
body {
background-color: silver;
}
@media screen and (max-width: 2013px) {
body {
background-color: goldenrod;
}
@media screen and (max-width: 2014px) {
body {
background-color: gold;
}
@media screen and (max-width: 2015px) {
body {
background-color: silver;
}
@media screen and (max-width: 2016px) {
body {
background-color: goldenrod;
}
@media screen and (max-width: 2017px) {
body {
background-color: gold;
}
@media screen and (max-width: 2018px) {
body {
background-color: silver;
}
@media screen and (max-width: 2019px) {
body {
background-color: goldenrod;
}
@media screen and (max-width: 2020px) {
body {
background-color: red;
}
@media screen and (max-width: 2021px) {
body {
background-color: gold;
}
@media screen and (max-width: 2022px) {
body {
background-color: silver;
}
@media screen and (max-width: 2023px) {
body {
background-color: goldenrod;
}
@media screen and (max-width: 2024px) {
body {
background-color: gold;
}
@media screen and (max-width: 2025px) {
body {
background-color: silver;
}
@media screen and (max-width: 2026px) {
body {
background-color: goldenrod;
}
@media screen and (max-width: 2027px) {
body {
background-color: gold;
}
@media screen and (max-width: 2028px) {
body {
background-color: silver;
}
@media screen and (max-width: 2029px) {
body {
background-color: goldenrod;
}
@media screen and (max-width: 2030px) {
body {
background-color: blue;
}
@media screen and (max-width: 2020px) {
body {
background-color: red;
}
@media screen and (max-width: 2031px) {
body {
background-color: gold;
}
@media screen and (max-width: 2032px) {
body {
background-color: silver;
}
@media screen and (max-width: 2033px) {
body {
background-color: goldenrod;
}
@media screen and (max-width: 2034px) {
body {
background-color: gold;
}
@media screen and (max-width: 2035px) {
body {
background-color: silver;
}
@media screen and (max-width: 2036px) {
body {
background-color: goldenrod;
}
@media screen and (max-width: 2037px) {
body {
background-color: gold;
}
@media screen and (max-width: 2038px) {
body {
background-color: silver;
}
@media screen and (max-width: 2039px) {
body {
background-color: goldenrod;
}
@media screen and (max-width: 2040px) {
body {
background-color: yellow;
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}
}If we can nest media queries 40 Levels deeps the background should be yellow
<br><br>
Chrome 72 can<br>
Firefox 65 can<br>
Edge 17 can<br>【讨论】：