響應式設計

2021-06-26 02:08:00 字數 836 閱讀 2191

響應式設計簡單說呢就是針對不同的螢幕解析度應用不同的css樣式,這裡有兩個關鍵點:

一是如何在不修改dom結構的前提下調整布局

二是如何判斷螢幕解析度並應用對應的css

以上兩點應該不依賴於js.

(1) 實現第一點依靠的是流式布局,就是所有參與布局的div都用float:left,寬度都用百分比表示

圖一圖二            

如上兩個圖所示,黃色div的寬度是60%,粉絲div寬度為40%,如果將黃色和粉色的寬度都改為 width=100%,那麼從一行變成了2行。從而實現了不修改dom實現布局變化

(2) html5提供了一種新的css語法——@media,學名是media query,可以為不同的解析度設定不同的樣式css

@media only screen and (max-width:320px)

}

上段**含義就是當螢幕寬度小於等於320px時應用大括號中的樣式。

@media only screen and(min-width:321px) and (max-width:480px) and (orientation:landscape)
上段**針對phone橫屏的。寬度在321~480px之間,且「橫向」的

除了上述兩點,還需要在頁面上增加乙個viewport的meta標籤,否則在手機上可能會有頁面自動縮放的情況:

總結:響應式布局有三個關鍵點:

1.流式布局 liquid layout

2.**查詢 media query  

3.viewport

響應式設計

響應式設計 樣式設計適應各種不同解析度尺寸 學習1.css3 media queries 2.樣式覆蓋 考 the orientation media query 一文。我們可以建立多個樣式表,以適應不同裝置型別的寬度範圍。將多個media queries整合在乙個樣式表檔案中 50 smartph...

響應式設計

響應式設計就給不同解析度設計不同 顯示合理美觀 的樣式,也就是說設計師多設計幾套樣式,在使用者訪問的時候,根據使用者使用的螢幕解析度展現給使用者相應的頁面 呼叫相應的樣式 一 設計師了解市面上所使用的解析度,收集資訊 二 設計師根據不同解析度給頁面設計不同的樣式 三 呼叫樣式 1 直接在同個樣式樣式...

響應式設計

查詢 設計點一 百分比布局 僅僅使用 查詢來適應不同的固定寬度設計,只會從一組css到另一組css的切換。兩種之間的沒有任何平滑漸變。當沒有命中 查詢時,表現就會變得不可控制 滾動 換行 img max width 100 設計點三 重新布局,顯示與隱藏 當頁面達到手機螢幕寬度的時候,很多時候就要放...