vue中使用rem布局代碼詳解
更新時間：2019年10月30日 08:35:29 作者：三人行有我?guī)?
在本篇文章里小編給大家整理的是關于vue中使用rem布局代碼詳解知識點，需要的朋友們參考下。
1、npm i amfe-flexible
2、import ‘amfe-flexible‘
然后再，安裝postcss-px2rem插件
npm i postcss-px2rem
在package.json中配置
"postcss": {
"plugins": {
"autoprefixer": {},
"postcss-px2rem": {
"remUnit": 26.7
}
}
}
在vue項目中使用rem布局簡易教程
rem布局由于其根據(jù)屏幕寬度的改變修改相應的rem與px的轉換比例，這樣非常適合移動端的項目。
在不同的分辨率下，都會有較好的顯示效果。
在使用rem布局的時候需要引入flexible.js。
js會根據(jù)屏幕的寬度計算html的根字體大小
在vue項目中只需要安裝raziel-flex模塊引用就行
安裝方法
npm install raziel-flex
引用方法（在main.js中引用）
import flex from 'raziel-flex' flex(600); //傳入值為頁面變化最大寬（px）
引用時會需要傳入一個參數(shù)，布局變化的最大寬，當大于這個值時模塊便不再修改html根字體的大小。
模塊修改的根字體的大小等于屏幕寬度除以10；
vacode編輯器安裝remcss插件使用時更方便。
以上就是本次介紹的全部知識點，感謝大家的學習和對腳本之家的支持。
相關文章
今天小編就為大家分享一篇解決vue+element 鍵盤回車事件導致頁面刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
本篇文章介紹了如何使用 Vue3 實現(xiàn)一個鼠標經(jīng)過顯示按鈕的效果,我們使用了 Vue3 的 Composition API 來創(chuàng)建響應式的數(shù)據(jù),并使用了?@mouseover?和?@mouseleave?事件來監(jiān)聽鼠標的移入和移出事件,感興趣的朋友一起看看吧2024-04-04
本文主要介紹了Vue.js項目在apache服務器部署問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
vue.js this.$router.push獲取不到params參數(shù)問題
這篇文章主要介紹了vue.js this.$router.push獲取不到params參數(shù)問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
教你如何在 Nuxt 3 中使用 wavesurfer.js
這篇文章主要介紹了如何在 Nuxt 3 中使用 wavesurfer.js,本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
當我們遇到定位展示的時候會出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關于前端項目中如何使用百度地圖api(含實例)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue Tab切換以及緩存頁面處理的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了js數(shù)組的 entries() 獲取迭代方法，entries() 方法返回一個數(shù)組的迭代對象，該對象包含數(shù)組的鍵值對 (key/value)。下面來詳細介紹該neural,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了淺談Vue知識系列-axios，本文章內容詳細，具有很好的參考價值，希望對大家有所幫助，需要的朋友可以參考下<BR>2023-01-01
這篇文章主要介紹了vue之監(jiān)聽器的使用案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09