/* 竖屏 高大于宽 */
案例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*在移动端看 移动端显示的颜色 768px屏幕以下*/
body {
background-color: orange;
}
/* 小屏幕 768px-992px 屏幕宽度在768px以上显示的颜色*/
@media screen and (min-width: 768px) {
body {
background-color: yellow;
}
}
/* 中等屏幕 992px - 1200px*/
@media screen and (min-width: 992px) {
body {
background-color: tomato;
}
}
/* 大屏幕 大于1200px*/
@media screen and (min-width: 1200px) {
body {
background-color: pink;
}
}
</style>
</head>
<body>
</body>
</html>
```
### 5、大屏幕设备优先
```css
大屏幕设备优先:大屏幕 桌面在1200px以上 大型设备(大台式电脑,1200px 以上)
中等屏幕 992px-1200px
@media screen and (max-width:1200px) { ... } /* 中型设备(台式电脑,1200px 以下) */
小屏幕 768px-992px
@media screen and (max-width:992px){ ... }/* 小型设备(平板电脑,992px 以下) */
超小屏幕 768px屏幕以下
@media screen and (max-width:768px){ ... }/* 超小型设备(手机,768px 以下) */
或者
@media screen and (max-width:768px){ ... }/* 超小型设备(手机,767px 以下) */
/* 注意:此时超小屏幕和小屏幕在768px之间有冲突,怎么解决?
把超小屏幕的区间降低1px*/
```
案例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 屏幕大于1200px显示的颜色 */
body {
background-color: green;
}
/* 中等屏幕 992px-1200px 屏幕宽度在1200px以下显示的颜色*/
@media screen and (max-width:1200px) {
body {
background-color: tomato;
}
}
/* 小屏幕 768px-992px*/
@media screen and (max-width:992px) {
body {
background-color: pink;
}
}
/* 注意:此时超小屏幕和小屏幕在768px之间有冲突,怎么解决?
把超小屏幕的区间降低1px*/
/* 超小屏幕 768px屏幕以下*/
@media screen and (max-width:767px) {
body {
background-color: orange;
}
}
</style>
</head>
<body>
</body>
</html>
```
###