我正在使用移动优先设计设计多列页面。所以我的默认设计是针对移动设备,我使用媒体查询将设计扩展到平板电脑和移动版本。我在我的index.html文档中包含了我的元标记,但我的媒体查询样式未应用于chrome dev工具甚至实时网页上的平板电脑和桌面视图。我正在使用Sass。
我需要帮助才能知道我的代码无效的原因。
#app-container {
max-width: 100%;
border: 1px solid $blue-color;
height: 80vh;
margin: 3%;
display: block;
.shirt-container {
width: 90%;
border: 1px solid $pink-color;
margin: 10% auto;
height: 60vh;
display: block;
}
}
@media screen and (min-width: 480px) {
#app-container {
display: inline-block;
.shirt-container {
width: 50%;
display: inline-block;
}
}
}