vue中使用rem布局代碼詳解
更新時間：2019年10月30日 08:35:29 作者：三人行有我?guī)?
在本篇文章里小編給大家整理的是關(guān)于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項目中使用rem布局簡易教程
rem布局由于其根據(jù)屏幕寬度的改變修改相應(yīng)的rem與px的轉(zhuǎn)換比例，這樣非常適合移動端的項目。
在不同的分辨率下，都會有較好的顯示效果。
在使用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插件使用時更方便。
以上就是本次介紹的全部知識點，感謝大家的學習和對腳本之家的支持。
相關(guān)文章
這篇文章主要介紹了Vue-less的使用和deep深度選擇器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
最近新做了個項目，前端使用的是目前很流行的前端框架，對于后端，本項目選擇的是比較好上手、輕量級的python后臺框架：Flask。感興趣的可以了解一下2021-05-05
下面小編就為大家分享一篇vue-prop父組件向子組件進行傳值的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了vue用BMap百度地圖實現(xiàn)即時搜索功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
Vue官方推薦AJAX組件axios.js使用方法詳解與API
axios是Vue官方推薦AJAX組件,下面為大家介紹axios.js庫的詳細使用方法與API介紹2018-10-10
深入理解Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)
本文通過實例代碼給大家介紹了Vue父子組件生命周期執(zhí)行順序及鉤子函數(shù)的相關(guān)知識，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-08-08
webpack vue項目開發(fā)環(huán)境局域網(wǎng)訪問方法
下面小編就為大家分享一篇webpack vue項目開發(fā)環(huán)境局域網(wǎng)訪問方法，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧2018-03-03
項目開發(fā)中,一般我們都會使用SpringBoot+Vue進行前后端開發(fā),本文主要介紹了vue打包部署到springboot的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2024-07-07
這篇文章主要為大家詳細介紹了Vue如何結(jié)合Element實現(xiàn)頁面生成快照截圖功能,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-03-03
Vue中如何合并el-table第一列相同數(shù)據(jù)
這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03