css。如何为不同的窗口宽度编写（编码）css？

想知道如何为不同的窗口宽度编写（编码）css的正确（最佳）方法

这是一个活生生的例子

例如，具有左侧、右侧边栏和主要内容（

#middle

）

2） 对于特定的窗口宽度，编写特殊的css规则。像

@media screen and (max-width: 400px) {
#left, #right { display:none}
#middle { width:350px; height:75px; }    
}

@media screen and (min-width: 401px) and (max-width: 700px) {
#right { display:none}
}

因此，例如，如果窗口宽度小于或等于

400px

，则隐藏两个侧栏并调整大小

如我所见，应用“默认”中的css值，并且如果在

@媒体屏幕和（最大宽度：400px）{

中存在与“默认”不同的值，则应用不同的值（不同的值更改“默认”值）

似乎所有的方法都有效。但可能是更好的方法如何做到这一切

---

另一种方法是为每个窗口宽度编写（重复）整个规则。不要编写“默认”值。但在这种情况下，代码会更长……

上述代码中的一个建议

由于

#right{display:none}

适用于所有小于700的宽度，因此您可以将其添加到

@media（最大宽度：700px）

中

按降序使用

max width

媒体查询，并不断更改较低宽度屏幕的样式

---

你的问题是什么？基本上你就是这么做的，是的。对于动画网页，我更喜欢

jquery

。但是如果只改变简单的

css

，我认为

@media

是最好的。然而

bootstrap

是强大的

css

库too@torazaburo问题是“如果我这样做的话，可以吗？”我只是想检查一下。写了几个变体，我的脑子里似乎有点乱。所以我想检查一下如何做得更好。我看到你只使用了

最大宽度

。所有这些都可以。所以我明白我不需要使用

（最小宽度：Xpx）和（最大宽度：Xpx）

（最大宽度：Xpx）足够。如果窗口宽度介于

401px

和

700px

之间，则应用

@介质（最大宽度：700px）{

？您可以使用“最小”和“最大”范围。将其作为最后一个优先级。您还可以按升序尝试所有

min width

，从小屏幕到大屏幕进行样式设置。按降序使用

max width

，可以从大屏幕到小屏幕进行操作。

#left {background-color:#fff; background-repeat:repeat; background-position:left top; width:180px; height:25px; font-size:16px; font-family:Verdana; color:black; border-style:solid; border-width:1px; border-color:#000; text-align:left; padding:0px 0px 0px 0px; }

@media screen and (max-width: 400px) {
#left, #right { display:none}
#middle { width:350px; height:75px; }    
}

@media screen and (min-width: 401px) and (max-width: 700px) {
#right { display:none}
}