Responsive設計 (響應式設計)

1、什麼是響應式設計css

維基百科是這樣對響應式做的描述:「Responsive設計簡單的稱爲RWD,是精心提供各類設備都能瀏覽網頁的一種設計方法,RWD能讓你的網頁在不一樣的設備中展示不一樣的設計風格。」佈局

響應式佈局設計要考慮到元素佈局的秩序,須要知足三個條件:網站

  • 網站必須創建在靈活的流體網格基礎上

流體網格,這種網格設計將每一個格子使用百分比單位來控制網格大小,這樣作讓網格大小隨時根據屏幕尺寸大小作出相對應的比例縮放設計

  • 引用到網站的圖片必須是可伸縮的

彈性圖片指的是 不給圖片設置固定尺寸,而是根據流體網格進行縮放,用於適應各類網格的尺寸。blog

img {max-width:100%;}
  • 不一樣的顯示風格,須要在Media Querues上寫不一樣的樣式

根據用戶的使用設備的當前寬度,你的Web頁面將加載一個備用的樣式,實現特定的頁面風格。圖片

相關文章
相關標籤/搜索