如果單純的用vue或react的話，一般來說就是flex配合rem或者vw布局來實現自適應。
rem布局的原理是根據rem是相對於根字型大小而改變的， 例如設計稿是750px大小的，可以設定乙個轉換比例來做適配：
const width = document.document.documentelement.clientwidth // 獲取當前螢幕的寬度，例如蘋果6是375
const designwidth = 750 // 設計稿的寬度
// 下面計算比例，我們以1:100來計算（因為整除100好算，當然可以通過vscode外掛程式）：
const ratio = 375 / 750 * 100 // 就用這個來設定為根字型大小
document.queryselector('html').style.fontsize = ratio + 'px'
document.queryselector('body').style.fontsize = '16px' // 因為設定了跟字型大小，會影響到其他的樣式，所以要通過body還原
這樣假如設計稿的乙個`div`是100px，我們可以處以比例（100），即`1rem`。
div // 所以在375px裡面就是50px的寬度。
vw的話，是100vw即可以鋪滿整個螢幕，這個相對於rem更加簡單，只是可能相容性不如rem布局，實現：
// 假設設計稿是750px
const ratio = 750/100 = 7.5; // 除以100是因為螢幕寬度恆定為100vw
//假設乙個`div`是`375px`大小
div // 3.75vw在375px的螢幕下就是一般，即187.5px
與歌謠一起通關前端面試題
移動端自適應布局
一 前言 一般在做移動端過程中，常用的有rem布局 px轉rem工具的使用，本文將針對vue專案介紹一種px轉vw布局的實現方案。本文所用腳手架為vue cli搭建的，如何搭建請看作者的另一篇文章 vue cli3搭建vue專案 二 正文 要想實現px轉vw的自動轉化，需要在專案中自少引入如下4個依...
rem自適應布局 移動端自適應必備
由於移動端特殊性，本文講的是如何使用rem 實現自適應 或叫rem 響應式布局，通過使用乙個指令碼就可以rem自適應 rem是相對於根元素 這樣就意味著，我們只需要在根元素確定乙個px字型大小，則可以來算出元素的寬高。1rem 16px 瀏覽器html的畫素，可以設定這個基準值 假如瀏覽器的html...
移動端webapp自適應布局
請看這篇 hcysunyang的blog 一篇真正教會你開發移動端頁面的文章 二 width device width 這段 是讓布局視口的尺寸等於理想視口。裝置畫素比 dpr 裝置畫素個數 理想視口畫素個數 device width function doc,win win.addeventlis...