媒体查询@media

1. 常见的设备类型和宽度
   超小屏幕 手机 (<768px)
   小屏幕 平板 (≥768px)
   中等屏幕 桌面显示器 (≥992px)
   大屏幕 大桌面显示器 (≥1200px)

2. 如何让网页兼容所有设备?
   使用媒体查询做断点,根据不同的分辨率做不同的页面css的设置.

3. 如何使用?
   @media 媒体类型 and (属性设置) { //定义样式 }

3-1. 媒体类型
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等。
speech 应用于屏幕阅读器等发声设备

3-2. 媒体功能
max-width 最大宽度
min-width 最小宽度

对手机设备的断点设置

@media screen and (max-width: 414px) {
    #outerBox{
        width: 100%;
        margin: 0;
    }
    
    #box{
        width: 66%;
    }
    
    #box2{
        margin-left: 1%;
        width: 33%;
    }
}

为打印机做一个样式

@media print {
    #outerBox{
        font-size: 50px;
    }
}

了解更多：
https://www.w3cschool.cn/cssref/css3-pr-mediaquery.html

4. 总结： 媒体查询的核心思路，就是根据不同的设备宽度设置断点，然后书写css样式覆盖之前的样式。