四时宝库

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

你也可以针对不同的媒体使用不同 stylesheets :

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

物理分辨率小于300px

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

简化格式:

@media (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

物理分辨率大于768px 并且 小于 991px

@media (min-width: 768px) and(max-width: 991px) {
    .form-buttons{padding-left:200px;}
}

物理分辨率大于1920px

@media (min-width: 1920px)
.courses .col-md-3 {
    width: 20%;
}

物理分辨率大于768px

@media (min-width: 768px)
.courses .col-md-3 {
    float: left;
    width: 25%;
}

<script language=''javascript''>
    alert(screen.width + "*" + screen.height);
</script>