为什么我的CSS媒体查询无法正常工作

Question

我想创建一个可以在移动设备和台式机上响应的网站，但是我的媒体查询无法正常工作（这是无用的）。

如果有人想要html和CSS，我会在下面放置我的链接。

我的CSS：

@media screen and (min-width: 900px){
.container{
    width: 30vw;
}
.show-onscreen{
    display: block;
}
.hide-onscreen{
    display: none;
}
}

@media screen and (max-width: 700px) and (min-width: 900px){
    .container{
        width: 50vw ;
    }
}

@media screen and (max-width: 300px){
    .container{
        width: 99vw ;
    }
}

，这是完整的代码： full code

Answer 1

以下查询可能是问题所在：

@media screen and (max-width: 700px) and (min-width: 900px){
    .container{
        width: 50vw ;
    }
}

此处的最小宽度大于最大宽度，因此它将永远不会执行。

如果这是您的目标，可以尝试以下方法：

@media screen and (min-width: 700px) and (max-width: 900px){
    .container{
        width: 50vw ;
    }
}

Answer 2

@media screen and (max-width: 700px) and (min-width: 900px){
    .container{
        width: 50vw ;
    }
}

• max-width: 700px和＆min-width: 900px永远不会为真，因为宽度不能同时小于700和大于900。

我假设您打算将规则设置为700到900之间

@media screen and (max-width: 900px) and (min-width: 700px){

在媒体查询中切换宽度值

Answer 3

要首先建立和移动网站，您应该先为移动设备开发，然后再开发其他尺寸。

您将需要使用以下内容：

用途：用于移动设备（最小的屏幕除外），平板电脑，笔记本电脑，台式机，大屏幕。 480px

以上的任何人

@media only screen and (min-width: 480px) {
 // content
}

用途：适用于平板电脑，笔记本电脑，台式机，大屏幕。 768px

以上的任何人

@media only screen and (min-width: 768px) {
 // content
}

用法：适用于笔记本电脑，台式机和大屏幕。 992px

以上的任何人

@media only screen and (min-width: 992px) {
 // content
}

用法：适用于台式机和大屏幕。 1200px

以上的任何人

@media only screen and (min-width: 1200px) {
 // content
}

用法：仅适用于 1600像素

的大屏幕

@media only screen and (min-width: 1600px) {
 // content
}

要使用此代码，您无需设置媒体查询即可进行开发，直到需要为更大的屏幕更改某些CSS属性为止。

我建议您阅读这篇文章：A Hands-On Guide to Mobile-First Responsive Design