- Objective:
- Breadcrumb:
# 概念阐释
## 语义
- 针对响应式网站，不同屏幕大小下的不同样式
- 当屏幕满足`()`内的大小时，`{}`下的css样式就会有效
## 语法
```css
@media (min-width:768px) and (max-width:991px){...}
@media(orientation:portrait) {...} 屏幕方向，纵向，高度大于等于宽度
@media(orientation:landscape) {...} 屏幕方向，横向，宽度大于高度
@media print {...} 当打印时
@media screen {...} Used for computer screens, tablets, smart-phones etc.
```
*注意：*
1. media （）and （）必须有空格！！！！
2. 屏幕尺寸不能重复，如果上一个是最小1200，下一个最大要从1199开始
## 逻辑运算符
- 可以使用逻辑运算符：
- and
- `,` or
# 实例
## 用于自适应网站下单media query
- 适用框架（bootstrap），grid已经设定好，只要根据屏幕尺寸向里面填写想要修改的参数即可。
```css
/************************** 屏幕宽度调整 *****************************/
/* large devices */
@media (min-width:1200px){
.container .jumbotron {
background: url('../images/jumbotron_1200.jpg') no-repeat;
height: 675px;
}
}
/* medium devices */
@media (min-width: 992px) and (max-width: 1199px) {
#logo-img {
background: url('../images/restaurant-logo_medium.png') no-repeat;
height: 100px;
margin: 5px 5px 5px 0;
}
.container .jumbotron {
background: url('../images/jumbotron_992.jpg') no-repeat;
height: 558px;
}
}
/* small devices */
@media (min-width:768px) and (max-width:991px) {
.container .jumbotron {
background: url('../images/jumbotron_768.jpg') no-repeat;
width:768px;
height:432px;
}
}
```
## 用于grid的media query
<iframe src="https://codepen.io/harryzhu313/pen/ZERLpej" width="720" height="400"></iframe><br>
end
# 相关内容
# 参考资料