5. @media css变量

1. 媒体查询

---

CSS2 中引入了 @media 规则，根据不同媒体类型应用不同样式

查询包括：

视口的宽度和高度
设备的宽度和高度
方向（平板电脑/手机处于横向还是纵向模式）
分辨率

媒体类型包括：

all 所有媒体类型设备
print 打印机
screen 计算机、平板、手机等设备屏幕

语法：

@media not|only mediaType and (expressions) {
   
  CSS-Code;
}

举个栗子：

// 视口宽度 >= 480px时，应用skyblue色背景
@media screen and (min-width: 480px) {
   
  body {
   
    background-color: skyblue;
  }
}

// 视口宽度 >= 480px时，左菜单浮动到页面左侧，同时main主页面也跟着“上浮”，且距离左菜单 216 - 200 = 16px
#leftsidebar{
   
  float: none;
  width:auto;
}
#main{
   
  margin: 16px;
}
@media screen and (min-width: 480px) {
   
  #leftsidebar {
   width: 200px; float: left;}
  #main {
   margin-left: 216px;}
}

再举多个详细的栗子

响应式导航菜单

.topnav {
   
  overflow: hidden;
  background-color: #333;
}

.topnav a {
   
  float: left;
  display