.abc{
height
:
300px
;
border
:
1px
solid
#000
;
margin
:
0
auto
}
@media
screen
and (
min-width
:
1201px
) {
.abc {
width
:
1200px
}
}
@media
screen
and (
max-width
:
1200px
) {
.abc {
width
:
900px
}
}
@media
screen
and (
max-width
:
901px
) {
.abc {
width
:
200px
;}
}
@media
screen
and (
max-width
:
500px
) {
.abc {
width
:
100px
;}
}
需要注意是CSS代码顺序,由大到小排版CSS(判断浏览器宽度越大越放前),这样是因为逻辑关系,@media 判断CSS排错将导致判断失效。
@media
all
and (
min-width
:
320px
) and (
max-width
:
480px
) {
.form-horizontal .control-label {
font-size
:
14px
;
color
:
#999999
;
margin-bottom
:
10px
;
}
}