CSS媒体查询

媒体：设备（手机、平板、电脑）；

媒体解析：获取不通屏幕尺寸（宽度和高度）；

根据媒体设计样式：当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；

CSS 语法：

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

}

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

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

例子：

/* 打印样式 */
@media print {
color: red;
}

/* 手机等小屏幕手持设备 */
@media screen and (min-width: 320px) and (max-width: 480px) {
body {
background: yellow;
}
}

/* 平板之类的宽度 1024 以下设备 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {
body {
background: blue;
}
}

/* PC客户端或大屏幕设备: 1028px 至更大 */
@media only screen and (min-width: 1029px) {
body {
background: green;
}
}

/* 竖屏 */
@media screen and (orientation:portrait) and (max-width: 720px) {对应样式}

/* 横屏 */
@media screen and (orientation:landscape){对应样式}