1
2
3
4
5
6
7
8
9
10
11
12
|
.abc{
height
:
300px
;
border
:
1px
solid
#000
;
margin
:
0
auto
}
@media
screen
and (
min-width
:
1201px
) { .abc {
width
:
1200px
}
}
/* css注释:设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media
screen
and (
max-width
:
1200px
) { .abc {
width
:
900px
}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media
screen
and (
max-width
:
901px
) { .abc {
width
:
200px
;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media
screen
and (
max-width
:
500px
) { .abc {
width
:
100px
;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
|
1
2
3
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<
code
class
=
"hljs xml"
style
=
"padding:10px;line-height:1.4;font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;"
><
span
class
=
"hljs-meta"
style
=
"color:rgb(127,159,127);"
>
span
> <
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-tag"
><
span
><
span
class
=
"hljs-name"
style
=
"color:rgb(239,239,143);"
><
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-name"
style
=
"color:rgb(239,239,143);"
>html
span
>
span
>
span
><
span
class
=
"hljs-tag"
>>
span
>
span
> <
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-tag"
><
span
><
span
class
=
"hljs-name"
style
=
"color:rgb(239,239,143);"
><
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-name"
style
=
"color:rgb(239,239,143);"
>head
span
>
span
>
span
><
span
class
=
"hljs-tag"
>>
span
>
span
> <
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-tag"
><
span
><
span
class
=
"hljs-name"
style
=
"color:rgb(239,239,143);"
><
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-name"
style
=
"color:rgb(239,239,143);"
>meta
span
>
span
>
span
><
span
class
=
"hljs-tag"
>
span
><
span
class
=
"hljs-attr"
><
span
class
=
"hljs-tag"
><
span
class
=
"hljs-attr"
>charset
span
>
span
>
span
><
span
class
=
"hljs-tag"
>=
span
><
span
class
=
"hljs-string"
style
=
"color:rgb(204,147,147);"
><
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-string"
style
=
"color:rgb(204,147,147);"
>"utf-8"
span
>
span
>
span
><
span
class
=
"hljs-tag"
> />
span
>
span
> <
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-tag"
><
span
><
span
class
=
"hljs-name"
style
=
"color:rgb(239,239,143);"
><
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-name"
style
=
"color:rgb(239,239,143);"
>title
span
>
span
>
span
><
span
class
=
"hljs-tag"
>>
span
>
span
>无标题文档<
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-tag"
>
span
><
span
class
=
"hljs-name"
style
=
"color:rgb(239,239,143);"
><
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-name"
style
=
"color:rgb(239,239,143);"
>title
span
>
span
>
span
><
span
class
=
"hljs-tag"
>>
span
>
span
> <
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-tag"
><
span
><
span
class
=
"hljs-name"
style
=
"color:rgb(239,239,143);"
><
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"hljs-name"
style
=
"color:rgb(239,239,143);"
>style
span
>
span
>
span
><
span
class
=
"hljs-tag"
>>
span
>
span
><
span
class
=
"css"
><
span
class
=
"css"
>
span
><
span
class
=
"hljs-selector-class"
style
=
"color:rgb(239,239,143);"
><
span
class
=
"css"
><
span
class
=
"hljs-selector-class"
>.abc
span
>
span
>
span
><
span
class
=
"css"
>{
span
><
span
class
=
"hljs-attribute"
style
=
"color:rgb(239,220,188);"
><
span
class
=
"css"
><
span
class
=
"hljs-attribute"
>height
span
>
span
>
span
><
span
class
=
"css"
>:
span
><
span
class
=
"hljs-number"
style
=
"color:rgb(140,208,211);"
><
span
class
=
"css"
><
span
class
=
"hljs-number"
>300px
span
>
span
>
span
><
span
class
=
"css"
>;
span
><
span
class
=
"hljs-attribute"
style
=
"color:rgb(239,220,188);"
><
span
class
=
"css"
><
span
class
=
"hljs-attribute"
>border
span
>
span
>
span
><
span
class
=
"css"
>:
span
><
span
class
=
"hljs-number"
style
=
"color:rgb(140,208,211);"
><
span
class
=
"css"
><
span
class
=
"hljs-number"
>1px
span
>
span
>
span
><
span
class
=
"css"
> solid
span
><
span
class
=
"hljs-number"
style
=
"color:rgb(140,208,211);"
><
span
class
=
"css"
><
span
class
=
"hljs-number"
>#000
span
>
span
>
span
><
span
class
=
"css"
>;
span
><
span
class
=
"hljs-attribute"
style
=
"color:rgb(239,220,188);"
><
span
class
=
"css"
><
span
class
=
"hljs-attribute"
>margin
span
>
span
>
span
><
span
class
=
"css"
>:
span
><
span
class
=
"hljs-number"
style
=
"color:rgb(140,208,211);"
><
span
class
=
"css"
><
span
class
=
"hljs-number"
>0
span
>
span
>
span
><
span
class
=
"css"
> auto}
@
span
><
span
class
=
"hljs-keyword"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"css"
><
span
class
=
"hljs-keyword"
>media
span
>
span
>
span
><
span
class
=
"css"
> screen and (min-width:
span
><
span
class
=
"hljs-number"
style
=
"color:rgb(140,208,211);"
><
span
class
=
"css"
><
span
class
=
"hljs-number"
>1201px
span
>
span
>
span
><
span
class
=
"css"
>) {
span
><
span
class
=
"hljs-selector-class"
style
=
"color:rgb(239,239,143);"
><
span
class
=
"css"
><
span
class
=
"hljs-selector-class"
>.abc
span
>
span
>
span
><
span
class
=
"css"
> {
span
><
span
class
=
"hljs-attribute"
style
=
"color:rgb(239,220,188);"
><
span
class
=
"css"
><
span
class
=
"hljs-attribute"
>width
span
>
span
>
span
><
span
class
=
"css"
>:
span
><
span
class
=
"hljs-number"
style
=
"color:rgb(140,208,211);"
><
span
class
=
"css"
><
span
class
=
"hljs-number"
>1200px
span
>
span
>
span
><
span
class
=
"css"
>}
}
span
><
span
class
=
"hljs-comment"
style
=
"color:rgb(127,159,127);"
><
span
class
=
"css"
><
span
class
=
"hljs-comment"
>/* css 注释说明:设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
span
>
span
>
span
><
span
class
=
"css"
>
@
span
><
span
class
=
"hljs-keyword"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"css"
><
span
class
=
"hljs-keyword"
>media
span
>
span
>
span
><
span
class
=
"css"
> screen and (max-width:
span
><
span
class
=
"hljs-number"
style
=
"color:rgb(140,208,211);"
><
span
class
=
"css"
><
span
class
=
"hljs-number"
>1200px
span
>
span
>
span
><
span
class
=
"css"
>) {
span
><
span
class
=
"hljs-selector-class"
style
=
"color:rgb(239,239,143);"
><
span
class
=
"css"
><
span
class
=
"hljs-selector-class"
>.abc
span
>
span
>
span
><
span
class
=
"css"
> {
span
><
span
class
=
"hljs-attribute"
style
=
"color:rgb(239,220,188);"
><
span
class
=
"css"
><
span
class
=
"hljs-attribute"
>width
span
>
span
>
span
><
span
class
=
"css"
>:
span
><
span
class
=
"hljs-number"
style
=
"color:rgb(140,208,211);"
><
span
class
=
"css"
><
span
class
=
"hljs-number"
>900px
span
>
span
>
span
><
span
class
=
"css"
>}
}
span
><
span
class
=
"hljs-comment"
style
=
"color:rgb(127,159,127);"
><
span
class
=
"css"
><
span
class
=
"hljs-comment"
>/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
span
>
span
>
span
><
span
class
=
"css"
>
@
span
><
span
class
=
"hljs-keyword"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"css"
><
span
class
=
"hljs-keyword"
>media
span
>
span
>
span
><
span
class
=
"css"
> screen and (max-width:
span
><
span
class
=
"hljs-number"
style
=
"color:rgb(140,208,211);"
><
span
class
=
"css"
><
span
class
=
"hljs-number"
>900px
span
>
span
>
span
><
span
class
=
"css"
>) {
span
><
span
class
=
"hljs-selector-class"
style
=
"color:rgb(239,239,143);"
><
span
class
=
"css"
><
span
class
=
"hljs-selector-class"
>.abc
span
>
span
>
span
><
span
class
=
"css"
> {
span
><
span
class
=
"hljs-attribute"
style
=
"color:rgb(239,220,188);"
><
span
class
=
"css"
><
span
class
=
"hljs-attribute"
>width
span
>
span
>
span
><
span
class
=
"css"
>:
span
><
span
class
=
"hljs-number"
style
=
"color:rgb(140,208,211);"
><
span
class
=
"css"
><
span
class
=
"hljs-number"
>200px
span
>
span
>
span
><
span
class
=
"css"
>;}
}
span
><
span
class
=
"hljs-comment"
style
=
"color:rgb(127,159,127);"
><
span
class
=
"css"
><
span
class
=
"hljs-comment"
>/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
span
>
span
>
span
><
span
class
=
"css"
>
@
span
><
span
class
=
"hljs-keyword"
style
=
"color:rgb(227,206,171);"
><
span
class
=
"css"
><
span
class
=
"hljs-keyword"
>media
span
>
span
>
span
><
span
class
=
"css"
> screen and (max-width:
span
><
span
class
=
"hljs-number"
style
=
"color:rgb(140,208,211);"
><
span
class
=
"css"
><
span
class
=
"hljs-number"
>500px
span
>
span
>
span
><
span
class
=
"css"
>) {
span
><
span
class
=
"hljs-selector-class"
style
=
"color:rgb(239,239,143);"
><
span
class
=
"css"
><
span
class
=
"hljs-selector-class"
>.abc
span
>
span
>
span
><
span
class
=
"css"
> {
span
><
span
class
=
"hljs-attribute"
style
=
"color:rgb(239,220,188);"
><
span
class
=
"css"
><
span
class
=
"hljs-attribute"
>width
span
>
span
>
span
><
span
class
=
"css"
>:
span
><
span
class
=
"hljs-number"
style
=
"color:rgb(140,208,211);"
><
span
class
=
"css"
><
span
class
=
"hljs-number"
>100px
span
>
span
>
span
><
span
class
=
"css"
>;}
}
span
><
span
class
=
"hljs-comment"
style
=
"color:rgb(127,159,127);"
><
span
class
=
"css"
><
span
class
=
"hljs-comment"
>/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
span
>
span
>
span
><
span
class
=
"css"
>
span
>
span
><
span
class
=
"hljs-tag"
style
=
"color:rgb(227,206,171);"
><
|