CSS。如何为不同的窗口宽度编写(代码)css？

Question

想知道如何为不同的窗口宽度编写(代码)CSS 的正确(最佳)方式。

这是一个活生生的例子 https://jsfiddle.net/q0ony7Lb/16/

例如，有左侧边栏、右侧边栏和主要内容 (#middle)。

<div id="left">Content in left div<br/></div>    

<div id="middle">Content in middle div<br/></div>

<div id="right">Content in right div<br/></div>

如果窗口宽度小于或等于 400px，则只想显示 #middle。

如果宽度大于400px且小于或等于700px，则显示#middle和#left.

如果宽度大于700px，则全部显示。

目前是这样做的:

1) 编写默认 css(如果相应的 @media screen 内没有其他规则，则应用“默认”css)。默认 CSS 样

#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; }

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，则隐藏两个侧边栏并调整 #middle 大小。

如我所见，应用来自“默认”的 css 值，如果在 @media screen and (max-width: 400px) { 中存在与“default”不同的值，则应用不同的值(不同的值更改“默认”值)。

似乎一切正常。但可能有更好的方法来完成所有操作吗？

另一种方法可能是为每个窗口宽度编写(重复)整个规则。并且不要写“默认”值。但在这种情况下代码会更长....

Answer 1

上面代码中的一个建议。

自 #right { display:none}适用于所有小于700的宽度，你可以在@media (max-width:700px)中添加它.

使用 max-width媒体查询按降序排列，并不断更改较低宽度屏幕的样式。

https://jsfiddle.net/afelixj/q0ony7Lb/17/