vue中使用rem布局代碼詳解
1、npm i amfe-flexible
2、import ‘a(chǎn)mfe-flexible‘
然后再，安裝postcss-px2rem插件
npm i postcss-px2rem
在package.json中配置
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem": {
"remUnit": 26.7
}
}
}
在vue項(xiàng)目中使用rem布局簡(jiǎn)易教程
rem布局由于其根據(jù)屏幕寬度的改變修改相應(yīng)的rem與px的轉(zhuǎn)換比例，這樣非常適合移動(dòng)端的項(xiàng)目。
在不同的分辨率下，都會(huì)有較好的顯示效果。
在使用rem布局的時(shí)候需要引入flexible.js。
js會(huì)根據(jù)屏幕的寬度計(jì)算html的根字體大小
在vue項(xiàng)目中只需要安裝raziel-flex模塊引用就行
安裝方法
npm install raziel-flex
引用方法（在main.js中引用）
import flex from 'raziel-flex' flex(600); //傳入值為頁面變化最大寬（px）
引用時(shí)會(huì)需要傳入一個(gè)參數(shù)，布局變化的最大寬，當(dāng)大于這個(gè)值時(shí)模塊便不再修改html根字體的大小。
模塊修改的根字體的大小等于屏幕寬度除以10；
vacode編輯器安裝remcss插件使用時(shí)更方便。
以上就是本次介紹的全部知識(shí)點(diǎn)，感謝大家的學(xué)習(xí)和對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了Vue-less的使用和deep深度選擇器,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
最近新做了個(gè)項(xiàng)目，前端使用的是目前很流行的前端框架，對(duì)于后端，本項(xiàng)目選擇的是比較好上手、輕量級(jí)的python后臺(tái)框架：Flask。感興趣的可以了解一下2021-05-05
下面小編就為大家分享一篇vue-prop父組件向子組件進(jìn)行傳值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue用BMap百度地圖實(shí)現(xiàn)即時(shí)搜索功能
這篇文章主要為大家詳細(xì)介紹了vue用BMap百度地圖實(shí)現(xiàn)即時(shí)搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
Vue官方推薦AJAX組件axios.js使用方法詳解與API
axios是Vue官方推薦AJAX組件,下面為大家介紹axios.js庫的詳細(xì)使用方法與API介紹2018-10-10
深入理解Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)
本文通過實(shí)例代碼給大家介紹了Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-08-08
webpack vue項(xiàng)目開發(fā)環(huán)境局域網(wǎng)訪問方法
下面小編就為大家分享一篇webpack vue項(xiàng)目開發(fā)環(huán)境局域網(wǎng)訪問方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助，一起跟隨小編過來看看吧2018-03-03
vue打包部署到springboot的實(shí)現(xiàn)示例
項(xiàng)目開發(fā)中,一般我們都會(huì)使用SpringBoot+Vue進(jìn)行前后端開發(fā),本文主要介紹了vue打包部署到springboot的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2024-07-07
Vue+Element實(shí)現(xiàn)頁面生成快照截圖
這篇文章主要為大家詳細(xì)介紹了Vue如何結(jié)合Element實(shí)現(xiàn)頁面生成快照截圖功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
Vue中如何合并el-table第一列相同數(shù)據(jù)
這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03