欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫

媒體查詢

響應式網頁是這幾年很流行的網頁風格之一響應式網頁是什么意思，他能夠以一套網頁代碼，面對不同的條件，例如改變瀏覽器的寬度，手機橫豎屏，作出不同的樣式調整。

一套代碼走天下

最出名的響應式框架是，來自。也是每個剛入門前端開發師必學的框架，利用這個框架可以很輕松實現響應式效果。

面對不同的瀏覽器寬度，作出界面調整

要實現響應式，關鍵在于使用媒體查詢 Media！

語法

@media （媒體特性）and （媒體特性） {你的樣式}

看起來好像很復雜，先看完整的代碼

@media??(max-width:480px){?
????body{background-color:green}
?}

上面這句話的意思，瀏覽器的寬度小于或等于480px時響應式網頁是什么意思，背景顏色是綠色。

再來多一個，如下

@media??(min-width:481px){?
????body{background-color:red}
}

上面這句話的意思，瀏覽器的寬度大于或等于481px時，背景顏色是紅色。

媒體特性

媒體特性就是依據什么樣的條件來進行更改樣式，是根據屏幕寬度大小、還是橫豎屏呢。這些條件都是官方定的，非常多。但實際上，真正有用的就是 min-width和max-width，根據瀏覽器寬度來設定不同的樣式。

這里會很容易混淆min-width和max-width的意義。min-width表示大于等于，max-width表示小于等于。

@media?(max-width: 500px) {
????/** 窗口寬度小于等于500像素的樣式 **/
}

@media?(min-width: 800px) {
????/** 窗口寬度大于等于800像素的樣式 **/
}

當有多個媒體特性時，用and連接，就可以形成一個區間范圍

@media?(min-width: 600px) and (max-width: 700px) {
????/** 窗口寬度在600-700像素的樣式 **/
}

這就是他最基本的用法，凡是有兩面性，下面來說說他的優缺點。

優點

（1）面對不同分辨率設備靈活性強

（2）能夠快捷解決多設備顯示適應問題

缺點

（1）兼容各種設備工作量大，效率低下

（2）代碼累贅，會出現隱藏無用的元素，加載時間加長

案例

全局布局

下面這種響應式布局最為常見，通過媒體查詢定義不同的樣式，讓其能夠適應手機瀏覽器和桌面瀏覽器：

1、電腦端大屏幕下，網頁元素全部展示

電腦端樣式

2、手機端下，因為屏幕有限，只能讓主體內容呈現出來，其余部分隱藏起來，并且讓字體縮小。

手機端樣式

柵格布局

一提起響應式，絕對離不開強大的柵格布局，根據瀏覽器的寬度，設置容器不同的列寬。

??