css - 響應式

css - 響應式

移動設備尺寸

移動設備的尺寸各不相同，大體上可以做如下划分： 

768px以下的是手機屏幕

768px-991px是平板ipad屏幕

992px-1199是大平板屏幕

1200極其以上是大屏幕

通用版心

超小屏：768px以下         版心寬100%
小   屏：768px-992px      版心寬750px
中   屏：992px-1200px    版心寬970px
大   屏：1200px以上        版心寬1170px

響應式布局

能同時自動適各種屏幕尺寸的網頁布局就是響應式布局，響應式布局是一種能夠根據不同尺寸的屏幕去動態切換css樣式以便控制布局的方式。

媒體查詢

可以利用css的媒體查詢實現根據不同屏幕尺寸更改容器寬度實現響應式布局，如下面的代碼所示，通過@media查詢可以在各個查詢中為同一個元素寫不同的css代碼，版心.w這個盒子在大屏設備中居中顯示，而在手機設備中它是基於屏幕的100%顯示，小、中屏也需要使版心居中，能做到這一點就是利用了@media媒體查詢。媒體查詢也是后一個覆蓋前一個。

.w {
    height: 50px;
    color: white;
    margin: auto;
    text-align: center;
}

/*手機*/
@media screen and (min-width:0) {
    .w {
        width: 100%;
        background: red;
    }

    .w::after {
        content: "手機"
    }
}

/*小平板*/
@media screen and (min-width:768px) {
    .w {
        width: 750px;
        background: #4800ff;
    }

    .w::after {
        content: "小平板"
    }
}

/*大平板*/
@media screen and (min-width:992px) {
    .w {
        width: 970px;
        background: green;
    }

    .w::after {
        content: "大平板"
    }
}

/*pc*/
@media screen and (min-width:1200px) {
    .w {
        width: 1170px;
        background: black;
    }

    .w::after {
        content: "pc"
    }
}

<div class="w"></div>

復制以上代碼，保存后在瀏覽器打開，調整瀏覽器寬度很得到不同的版心寬。

 

css - 學習總目錄