Question

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

请解释我是5岁。

所以我试图让我的page在一些边缘附近洗牌，改变一些浮动并且通常是响应。我似乎无法让它发挥作用。基本上我想要的是@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

如果你想尝试级联工作，我通常会设置任何默认样式，然后从窄视口到宽视口。这样做意味着如果您在狭窄的视口设置了样式，则可以在更宽的视口处轻松覆盖它（因为样式将在样式表的下方）

/* start with default styles */  

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

祝你好运！

meta name =＆＃34; viewport＆＃34;和@media：根据实际页面的宽度激活CSS

1 个答案: