rem適配方案的使用

2021-09-28 22:52:49 字數 914 閱讀 2284

#rem適配方案的使用

##首先安裝amfe-flexible和postcss-pxtorem在終端執行如下**

npm install amfe-flexible -


snpm install postcss-pxtorem -


d
##然後在vue.config.js檔案的module.exports中新增如下**

productionsourcemap:


false


,  outputdir:


'docs'


,  publicpath: process.env.


node_env


==='production'


?'/vant-demo/'


:'/'


,  css:)]


}}}
##並在vue.config.js檔案的頭部中新增如下**

const autoprefixer =


require


('autoprefixer');


const pxtorem =


require


('postcss-pxtorem'


);
##在package.json檔案的最後新增**,有的有了就不用了新增了

"postcss":}


},"browserslist":[


"android >= 4.0"


,"ios >= 7"


]
##最後在main.js中匯入

import


'amfe-flexible'


;
這樣就可以了

rem 適配方案

首先我們要明白，為什麼要用rem單位呢，常用的px不好嗎？原因是如果我們用px作為長度大小單位的話，就無法根據螢幕大小變化實時改變頁面元素的大小，反之，rem就可以做到實時適配。其次，我們也要清楚以rem為單位的元素大小是根據css html根標籤下的文字大小 fontsize 來改變的。在實際開發...

rem適配方案

em大小是基於父元素的字型大小 rem是相對單位，r是root的意思，在html頁面上就是html標籤，所以rem的大小是基於html元素的字型大小 使用flex的伸縮布局 使用百分比的流式布局 使用 查詢的響應式布局，共同點就是元素只能做寬度的適配 除外 rem適配可以實現寬度和高度都能做到適配，...

前端 rem適配方案

原理rem是相對長度單位，rem方案中的樣式設計為相對於根元素font size計算值的倍數。根據螢幕寬度設定html標籤的font size，在布局時使用rem單位布局，達到自適應的目的，是彈性布局的一種實現方式。實現過程 首先獲取文件根元素和裝置dpr，設定rem，在html文件載入和解析完成後...