自適應/響應式的功課.....

請開始清算市面上的電子產品,得有百八十種的屏能夠供君挑選....這其實對在前端一線工做的程序員而言挺災難
的....

自適應/響應式概念

解決不一樣終端的適配問題,咱們通常有兩套方案,一是自適應佈局,二設置響應式佈局.

所謂的自適應就是屏幕變大或是變小,它的內容也要作到同步縮放,到某個寬度了會過於擁擠,內容展現不清,那就喊停加個min-width;
而響應式就是不一樣分辨率均可以私人定製一套樣式佈局,大碼女孩穿xl,而紙片girl穿xs~

總而言之,就是自適應的樣式佈局從一而終,能夠在不一樣分辨率的終端上顯示同同樣式的網頁,靈活設置寬度,而響應式的樣式佈局都會有或多或少的調整....

自適應的網站: https://status.heroku.com/
響應式的網站: https://www.microsoft.com/zh-cn/

(貼兩個網站,自助縮放,自行體會...)

開發工做場景

分辨率跨度太大,想要作到完美適配很是難的...正常狀況下公司通常都會作兩套版本,一個應用在pc端,一個運用於移動端...

但作兩套設計必定會致使開發和維護成本較高,因此爲了節約點開發時間,仍是會有些追求快速開發的公司但願能夠只作一套設計適配各個終端,這時候就得依賴響應式的佈局了....

響應式佈局的經典體驗就是bootstrap. 他自動識別屏幕的分辨率,作出相應的調整,佈局和內容或多或少會有點不同....好比原本橫向導航條變成漢堡菜單,原本一行三圖,變成一行一圖,原本的pc上展現的模塊隱藏了...

完成一個響應式的頁面要:

• 須要容許網頁寬度自動調整,第一個動做就是在head裏頭加一行viewpoort標籤

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

• 不可設置固定寬度,能夠width的值能夠設置百分比,或是auto或是rem.
• 字體單位最好使用em或者rem
• 流式佈局各個區塊都是浮動的,寬度不足,自動掉下,避免出現橫向導航條....注意絕對定位要少用!
• 利用 media,不一樣寬度引入不一樣的css文件
• css@media規則,統一css文件能夠根據不一樣分辨率,選擇應用不一樣的css規則
• 圖片要自動縮放,即設置 max-width;100%

本篇寫於:學習了https://my.oschina.net/u/1992... 以後...