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

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

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

I don't know if my media queries are correct

css

media-queries