想知道如何为不同的窗口宽度编写(代码)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”不同的值,则应用不同的值(不同的值更改“默认”值)。
似乎一切正常。但可能有更好的方法来完成所有操作吗?
另一种方法可能是为每个窗口宽度编写(重复)整个规则。并且不要写“默认”值。但在这种情况下代码会更长....
最佳答案
上面代码中的一个建议。
自 #right { display:none}
适用于所有小于700的宽度,你可以在@media (max-width:700px)
中添加它.
使用 max-width
媒体查询按降序排列,并不断更改较低宽度屏幕的样式。
关于CSS。如何为不同的窗口宽度编写(代码)css?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30690787/