元名称="viewport" 和@media：根据实际页面宽度激活CSS

Question

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

请像我5岁一样解释。

所以我试图让我的 page 在一些边距周围洗牌，改变一些浮点数并且通常是响应的。我似乎无法让它工作。基本上我想要的是当浏览器的宽度 window 而不是设备屏幕宽度达到某个标记时，@media 查询中的 CSS 进行切换。现在这是行不通的。我认为我会使用 CSS 的级联性质来覆盖以下事实：@media CSS 的 all 在低于最低最大值时应该处于活动状态 -宽度。情况似乎并非如此，相反，我以低得多的分辨率从 1600px 中获得了 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 在我看来比较复杂。下面是另一种编写媒体查询的方法，这种方法可以帮助您更轻松地定位样式和视口：

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

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

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

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

/* start with default styles */  

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

祝你好运！

元名称="viewport" 和@media：根据实际页面宽度激活CSS

meta name="viewport" and @media: activate CSS based upon width of actual page

html

css

media-queries

responsive-design