設計一套方案，適配不一樣的分配率

代碼github地址：https://github.com/zhongqiulan/dkmother 

效果圖：

可否簡述一下如何使一套設計方案，適應不一樣的分辨率，有哪些方法能夠實現？

答：流式佈局：

    使用非固定像素來定義網頁內容，也就是百分比佈局，經過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。

    這樣的佈局方式，就是移動web開發使用的經常使用佈局方式。這樣的佈局能夠適配移動端不一樣的分辨率設備。

    響應式開發：

    那麼Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站可以兼容多個終端。愈來愈多的設計師也採用了這種設計。

CSS3中的Media Query（媒介查詢），經過查詢screen的寬度來指定某個寬度區間的網頁佈局。

 

    因爲響應式開發顯得繁瑣些，通常使用第三方響應式框架來完成，好比bootstrap來完成一部分工做，固然也能夠本身寫響應式。

    闡述下移動web和響應式的區別：

 

例如：

一：

一道驢媽媽旅遊網頁引發的響應式佈局，移動端佈局思考

題目：驢媽媽設計圖中的單位轉化爲rem,實現頁面佈局; 使用媒體查詢爲不一樣的屏幕設置不一樣的rem值; 使用less編寫css並編譯爲css; 頁面中的輪播圖部分使用'swiper'實現; 

這個文章對咱們所學的全部的佈局都有介紹, 對你們瞭解不一樣狀況下使用哪一種佈局有必定幫助

https://www.cnblogs.com/yanayana/p/7066948.html

那該怎樣作到PC和移動端完美適配

這個文章對咱們所學的全部的佈局都有介紹, 對你們瞭解不一樣狀況下使用哪一種佈局有必定幫助

若是你想要單純用移動端, 就使用rem彈性佈局比較好, 若是你須要一個頁面適配pc和移動端, 使用響應式解決, 可使用彈性佈局flex, 或者直接比例計算, 固然, 你也能夠在移動端使用flex佈局, 而後rem進行細節修正, 根據實際狀況來斷定你須要什麼樣的佈局, 使用什麼技術

https://www.cnblogs.com/2050/p/3877280.html

參考連接：

https://www.cnblogs.com/yanayana/p/7066948.html

https://www.cnblogs.com/2050/p/3877280.html