1、常見的設(shè)備類型和寬度
超小屏幕 手機(jī) (<768px)
小屏幕 平板 (≥768px)
中等屏幕 桌面顯示器 (≥992px)
大屏幕 大桌面顯示器 (≥1200px)
2、如何讓網(wǎng)頁兼容所有設(shè)備?
使用媒體查詢做斷點(diǎn),根據(jù)不同的分辨率做不同的頁面css的設(shè)置.
3、如何使用?
@media 媒體類型 and (屬性設(shè)置) { //定義樣式 }
3-1. 媒體類型
all 用于所有設(shè)備
print 用于打印機(jī)和打印預(yù)覽
screen 用于電腦屏幕，平板電腦，智能手機(jī)等。
speech 應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備

3-2. 媒體功能
max-width 最大寬度
min-width 最小寬度

 @media screen and (max-width: 415px) {
        .media-max {
            display: none;
        }

        .media-min {
            width: 100%;
            
        }
}
@media screen and (min-width: 415px) {
        .media-min {
            display: none;
        }

        .media-max {
            width: 100%;
            
        }
}

為打印機(jī)做一個樣式

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