@media(max-height:700){}
響應式布局-自適應布局 不同的設備 不同的窗口大小 展示不同的CSS就是媒體查詢
1、兩套代碼 同一個域名
2、一套代碼 在不同的分辨率下展示改動
3、寫@media的時候 要把這個寫在要設置的box后面
4、導入<link type="text/css" href="style.css" media="screen and (min-width:700px) and (max-width:990px) "/>

---常見自適應的方法---
1、自適應屏幕 固定頁面寬度 內容居中
.conter {
width: 990px;
margin: 0auto;
height: 200px;
line-height: 200px;
}

2、百分比屏幕 如有4個塊 每個設置25% 自適應
.conter {
display: inline-block;
width: 25%;
height: 200px;
box-sizing: border-box;
}

3、浮動 多出來的部分會被自動擠下去
.container {
float: left;
padding: 8px 12px;
border: 1px solid #ccc;
}

4、響應式 媒體查詢Media Queries 自適應
@media (min-width:700px) and (max-width:990px){ and-組合操作符
.container{
background: red;
}
}