css3 响应式媒体查询的示例代码

/ 将body的背景颜色设置为tan /
body {
  background-color: tan;
}
/ 在992px或更低的屏幕上，将背景颜色设置为蓝色 /
@media screen and (max-width: 992px) {
  body {
    background-color: blue;
  }
}
/ 在600px或更低的屏幕上，将背景颜色设置为橄榄色 /
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

.column {
  float: left;
  width: 25%;
}
/在992px宽或更小的屏幕上，从四列到两列 /
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}
/ 在宽度为600px或更小的屏幕上，使列堆叠在彼此之上而不是彼此相邻/
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

/ 如果屏幕大小超过600px宽，请将字体大小设置为80px /
@media screen and (min-width: 600px) {
  div.example {
    font-size: 80px;
  }
}
/ 如果屏幕尺寸为600px或更小，请将字体大小设置为30px /
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}