Question

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

例如，有左侧，右侧边栏和主要内容（#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) {内部存在与“默认”不同的值，则应用不同的值（不同的值会更改“默认”值）。

似乎所有的作品。但是如何做到这一点可能会有更好的方法呢？

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

Answer 1

上述代码中的一个建议。

由于#right { display:none}适用于所有宽度小于700的广告，因此您可以将其添加到@media (max-width:700px)。

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

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

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

1 个答案: