html - 元名称 ="viewport"和 @media : activate CSS based upon width of actual page

Question

编辑:在我的代码中发现了一个严重的错误，与其他有同样问题的人无关，我只是在媒体查询中缺少一个“}”，上面的那些不起作用。

请像我 5 岁一样解释。

所以我正在尝试获取我的 page围绕一些利润进行洗牌，改变一些 float 并且通常是响应的。我似乎无法让它工作。基本上我想要的是 @media 查询中的 CSS 在浏览器窗口的宽度(而不是设备屏幕宽度)达到某个标记时切换。现在这是行不通的。我想我会使用 CSS 的级联特性来覆盖 所有 @media CSS 在低于最低最大宽度时应该处于事件状态的事实。情况似乎并非如此，相反，我以低得多的分辨率从 1600 像素的 CSS 中获取了 CSS。

所以我读了起来，我读得越多，我就越困惑。请帮忙!

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

CSS

@media (max-width: 1600px ) {
    .container .block_people .person{
        margin: 0 0 500px 0;
    }
}
@media (max-width: 1400px ) {
    .block_people .person{
        margin: 0 0 100px 0;
    }
}
@media (max-width: 1200px ) {
    .block_people .person{
        margin: 0 0 100px 0;
    }
}
@media (max-width: 1000px){
    .container {
        width: 100%;
        margin: 0 auto;
        padding: 0 0.5%;
    }
    .block_people .person{
        margin: 0 0 100px 0;
    }
}
@media (max-width: 800px ) {
    .block_people .person{
        min-width: 300px;
        width: 90%;
        float: left;
        margin: 0 0 150px 0;
        display: inline-block;
    }
}
@media (max-width: 600px ) {
    .buttons {
        right: 225px;
    }
     nav.slide-menu-right{
        width: 200px;
    }

}

Answer 1

我觉得你的 CSS 比较复杂。下面是另一种编写媒体查询的方法，这种方法可以帮助您更轻松地定位样式和视口(viewport):

@media (max-width: 600px) {
}

@media (min-width: 601px) and (max-width: 800px) {
}

@media (min-width: 801px) and (max-width: 1000px) {
}  
etc

如果您想尝试让层叠发挥作用，我通常会设置任何默认样式，然后从窄视口(viewport)构建到宽视口(viewport)。这样做意味着如果您在窄视口(viewport)设置了样式，则可以轻松地在较宽的视口(viewport)覆盖它(因为样式将在样式表的下方)，例如

/* start with default styles */  

@media (min-width: 601px ) { .... }  
@media (min-width: 801px ) { .... }  
@media (min-width: 1001px ) { .... }  
@media (min-width: 1201px ) { .... }  
@media (min-width: 1401px ) { .... } 

祝你好运!