-最近在學習移動端的響應適布局，收集些系統的乾貨在部落格備用。
響應式布局就是響應式設計方案呈現的效果。具體就是頁面的布局會根據不同裝置的顯示面積（主要是寬度）的不同而呈現不同的布局，這個效果是比彈性的布局更好的地方是樣式會主動地根據使用者的裝置的顯示面積呈現的布局更靈活，可讀性更強。當然對研發的要求也更高（比如說如何更好地讓，適配，ui動畫自適應各種布局）。響應式設計一般來說是一套設計方案解決所有的裝置的自適應問題。對應的樣式檔案可能是多個，也可以只寫乙個（在乙個css檔案宣告不同的media query就可以）。
移動端布局就是傳統的固定寬度或者彈性布局的設計方案呈現的效果。一般來說，這個布局設計開發都比較簡單，同時設計的效果可以更精細，細節更豐富。不過不好的地方就是如果要適應很多不同的裝置，就需要設計多套設計方案，或者讓比較小屏的方案去適應多個大屏，適應的效果上可能不是特別好。
響應式設計方案的一般的做法就是根據目標使用者的訪問裝置的主要型別做三種或四種布局。每種布局有乙個區間，比如說小屏的手機分解析度可以設定為[320,640]。然後分別設計每種布局即可，一般來說，各個布局主要是調整模組的排列布局順序，內容調整越少越好（儘量減少使用者適應成本）。
不同之處：
1、適配的群體不同，響應式適配各種終端，而移端大部分為智慧型手機為主
2、響應式布局能根據不同的終端裝置實現不同的頁面布局，而移動端布局大部分是單列布局
3、響應式布局有可能造成冗餘的**較多（傳統式響應式布局，僅依賴於**查詢，控制不同的頁面布局），移動端布局冗餘**較少，對針對性較強。
相同之處：
1、在智慧型手機上，響應式看到的頁面效果能和移動端的一樣效果
2、兩者都要面對適配的問題
rem自適應布局：
移動端（響應式）
查詢 mdn stylesheet media max width 800px href example.css 複製 mobile first原則 響應式設計最好mobile first原則優先，不過pc first也可以，只不過現在一半以上的使用者都是用手機在訪問頁面 為實現響應式，可以根據不同...
vue移動端響應式方案設計
style響應與頁面響應外掛程式兩個外掛程式 postcss pxtorem amfe flexible1 postcss pxtorem 可以實現動態的將px轉為rem單位 px to rem 安裝 yarn add postcss pxtorem dev使用vue cli建立的，在專案根目錄下有...
移動端響應式布局
1.快捷鍵 meta vp tab鍵 2.viewport視口 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這個頁面的區域一共有多寬 瀏覽器...