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

我目前正在尝试建立一个响应式网站，并被这些媒体查询所困扰。所以这是我的问题。

.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;
    }
}

为什么？除非屏幕达到900像素，否则本机样式是否应该保持活动状态？如果不是，那么我是否必须针对每种样式进行2个媒体查询？

最佳答案

您的媒体最大宽度在900像素屏幕下使用，因此您的代码执行的操作与您想要的相反。

答：

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

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