1.响应不同的屏幕宽度
根据屏幕的尺寸设定不同的样式
实例：模仿bootstrap的栅格布局，让不同尺寸的屏幕下容器有不同的宽度
当设定的屏幕宽度范围有重合时，后面的设定会覆盖前面的。所以要把宽度范围小的放到后面
<body>
<div class="box"></div>
</body>
* {
padding: 0;
margin: 0;
}
html,body {
width: 100%;
height: 100%;
}
.box {
height: 100px;
background-color: red;
box-sizing: border-box;
color: white;
text-align: center;
float: left;
border: 1px solid #fff;
}
/* 当宽度设备屏幕范围 0-768px 时生效 */
@media screen and (max-width: 768px) {
/* 超小设备手机（<768px） */
.box {
width: 50%;
}
}
/* 当宽度设备屏幕范围 大于768px 时生效 */
@media screen and (min-width: 768px) {
/* 小型设备平板电脑（≥768px） */
.box {
width: 33.33%;
}
}
/* 当宽度设备屏幕范围 大于992px 时生效 */
@media screen and (min-width: 992px) {
/* 中型设备台式电脑（≥992px） */
.box {
width: 25%;
}
}
/* 当宽度设备屏幕范围 大于1200px 时生效 */
@media screen and (min-width: 1200px) {
/* 大型设备台式电脑（≥1200px） */
.box {
width: 16.66%;
}
}
2.响应屏幕宽高比
根据屏幕的宽高比来设定不同的样式
这两个一般用来判断范围内的比率
min-aspect-ratio：页面可见区域宽度与高度的最小比率，值的格式为n/m
max-aspect-ratio：页面可见宽度与高度的最大比率，值的格式为n/m
这个用来判断具体的比率
aspect-ratio：页面可见区域宽度与高度的比率，值的格式为n/m
注意：手机横竖屏切换时屏幕宽高比会发生变化
一般来说，手机竖屏时宽高比<1,而横屏时宽高比>1
/* 当宽高比范围 0-1 时生效 竖屏 */
@media (max-aspect-ratio:1/1) {
body {
background-color: red;
}
}
/* 当宽高比范围 >=1 时生效 横屏 */
@media (min-aspect-ratio:1/1) {
body {
background-color: blue;
}
}
设备的屏幕宽高比一般是由固定的值的，例如 （4:3）（16:9）（18:9）等等
@media (aspect-ratio:9/16){
body{
background-color: red;
}
}