题目1：用媒体查询实现如下要求

1. 在页面宽度> 1200px 时页面背景为红色 
2. 在页面1200px>=宽度> 900px  时页面背景为绿色
3. 在页面900px>=宽度> 600px  时页面背景为黄色
4. 宽度<=600px 背景为灰色

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

Demo

移动端布局-媒体查询 + rem单位布局
媒体查询 + rem单位布局说道这个布局，，那么我们首先得了解什么是媒体查询，rem是什么？媒体查询：媒体查询...
rem布局&响应式布局
rem布局 1.rem单位 2.媒体查询 2.1 什么是媒体查询 2.2 媒体查询语法规范 2.3 媒体查询+re...
day05-移动web开发－bootstrap（响应式开发）
设备的划分：媒体查询：使用媒体查询能针对不同屏幕区间设置不同的布局和样式怎么使用媒体查询：关于媒体查询 @me...
JavaScript---媒体查询(响应式)
媒体查询媒体查询是做响应式网站的必备媒体查询的格式@media (min-width: 980px){}@me...
CSS3媒体查询Media
媒体类型媒体查询规则
媒体查询和动态REM
媒体查询和的动态REM是响应式页面和移动端的常用技术。媒体查询的主要方式有： link元素媒体查询样式表中媒体...
CSS 响应设计-媒体查询
1、响应式 Web 设计 - 媒体查询媒体(media)查询在 CSS3 上有介绍：CSS3 @media 查询...
移动端适配（响应式）
媒体查询(media query) 媒体查询就是对设备按照某些条件进行查询，使符合查询条件的设备显示对应的样式，从...
媒体查询 + rem
媒体查询 + rem
13、媒体查询
媒体查询一定要放在初始设置的css样式底下，否则会被后面设置的css样式覆盖掉媒体查询所设置的样式，那么媒体查询就...