我不知道我的媒体查询是否正确

Question

我目前正在尝试构建一个自适应网站并陷入这些媒体查询。所以这是我的问题。

.safehouse-sub {
     color: #000000; 
     text-align: justify;
}

@media(min-width: 900px) {
.safehouse-sub {
     color: #000000; 
     text-align: justify;
     }
}  

@media(max-width: 900px) {
.safehouse-sub { 
    color: #000000;
    text-align: center;
    }
}

此代码为我提供了所需的效果，但如果我删除

@media(min-width: 900px) {
.safehouse-sub {
     color: #000000; 
     text-align: justify;
     }
}  

然后它只使用

@media(max-width: 900px) {
.safehouse-sub { 
    color: #000000;
    text-align: center;
    }
}

为什么呢？除非屏幕达到900px，否则本机风格是否应保持活动状态？如果没有那么我是否必须为每种风格进行2次媒体查询？

Answer 1

您的媒体最大宽度在900px屏幕下使用，因此您的代码与您想要的相反。

答案：

.safehouse-sub {
     color: #000000; 
     text-align: justify;
}

@media(min-width: 900px) {
.safehouse-sub { 
    color: #000000;
    text-align: center;
    }
}