Html 响应式@media 查询以删除样式声明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18569842/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
responsive @media query to remove style declarations
提问by questy
I'm unfamiliar with @media queries, and what I'm trying to accomplish is a responsive removal/alteration of certain CSS when the browser viewing is shrunk below a certain resolution, or a mobile device viewing the page is also below that same specified resolution.
我不熟悉@media 查询，我想要完成的是当浏览器查看缩小到特定分辨率以下时，响应式删除/更改某些 CSS，或者查看页面的移动设备也低于指定的相同解析度。
I need .sideto remove float: left; position: fixed; width: 150px;when below 500px width resolution, and .mainto remove border-left: 1px solid #000; margin: 0 0 0 170px;
我需要.side删除float: left; position: fixed; width: 150px;时低于500像素宽度分辨率，并.main以去除border-left: 1px solid #000; margin: 0 0 0 170px;
.side {
display: block;
float: left;
overflow: hidden;
position: fixed;
width: 150px;
}
.main {
border-left: 1px solid #000;
margin: 0 0 0 170px;
}
Any help or explanation is appreciated.
任何帮助或解释表示赞赏。
回答by Roy Sonasish
In this way you can do this
这样你就可以做到这一点
@media only screen and (max-width: 500px) {
.side {
float: none;
position: static;
width: auto;
}
.main {
border-left:0;
margin: 0;
}
}
回答by LinkinTED
.side {
display: block;
float: left;
overflow: hidden;
position: fixed;
width: 150px;
}
.main {
border-left: 1px solid #000;
margin: 0 0 0 170px;
width: auto;
}
@media only screen and (max-device-width : 500px) {
.side {
float: none;
position: static;
width: auto;
}
.main {
border: 0;
margin: 0;
}
}
