media

demo
@media mediatype and|not|only (media feature) {
CSS-Code;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*如果文档宽度小于 300 像素则修改背景颜色*/
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }
    .gridmain {
        width:100%;
    }
    .gridright {
        width:100%;
    }
}

//