vue中的rem如何配置
更新時間：2022年08月01日 09:58:32 作者：前端毒腳show
這篇文章主要介紹了vue中的rem如何配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue中rem的配置
開發(fā)移動端，我們常常會因為把握不好尺度而覺得十分難受，因此可以用到rem+flex進行，那么vue中我們該如何如何配置呢？
1.在js中統(tǒng)一計算進行配置
新建src/utils/rem.js 代碼如下：
const setFontSize = (minFontSize = 12, maxFontSize = 16) => {
? ? // 7.5根據(jù)設計稿的橫向分辨率/100得來
? ? var deviceWidth = document.documentElement.clientWidth;
? ? // 獲取瀏覽器寬度
? ? if(deviceWidth > 750) {
? ? ? ? // deviceWidth = 750;
? ? ? ? deviceWidth = 7.5 * 50;
? ? } else if (!deviceWidth) {
? ? ?? ? return;
? ? }
? ? const fontSize = Math.max(minFontSize, Math.min(12 * (deviceWidth / 320), maxFontSize));
? ? document.documentElement.style.fontSize = `${fontSize}px`;
? ? // 這樣子的1rem=font-size的大小
? ? // 當然，萬一你覺得這樣子做的rem太小，可以推薦你第二種寫法，相對更加簡便，代碼如下(注釋的)
? ? ?// 獲取瀏覽器寬度
? ? //if(deviceWidth > 750) {
? ? ? ? // deviceWidth = 750;
? ? ? ? //deviceWidth = 7.5 * 50;
? ? //}
? ? // document.documentElement.style.fontSize = `${deviceWidth / 7.5}px`;
? ? // 此時的fontSize大小為50px(375屏幕的時候)
? ? // 禁止雙擊放大
? ? document.documentElement.addEventListener('touchstart', function (event) {
? ? ? ? if (event.touches.length > 1) {
? ? ? ? ? ? event.preventDefault();
? ? ? ? }
? ? }, false);
? ? var lastTouchEnd = 0;
? ? document.documentElement.addEventListener('touchend', function (event) {
? ? ? ? var now = Date.now();
? ? ? ? if (now - lastTouchEnd <= 300) {
? ? ? ? ? ? event.preventDefault();
? ? ? ? }
? ? ? ? lastTouchEnd = now;
? ? }, false);
}
export default {
?? ?setFontSize ,
}然后：在main.js中進行引入：
// 樣式適應處理
import Rem from './utils/rem';
/* eslint-disable no-new */
new Vue({
? el: '#app',
? router,
? store,
? template: '<App/>',
? components: { App },
});
Rem.setFontSize();當然?。。。?！不能忘記設置默認大小
在asstes/gloabl.less中設置默認大小
//通用樣式
body{
? font-family: "PingFangSC-Regular","PingFang SC","蘭亭黑","Helvetica",sans-serif;
? color: @color-text;
? font-size: 14px;
? // font-sizt: 0.28rem; 375屏時
? background-color: @color-background;
}記得要在main.js中引入
// 自定義樣式
require('./assets/css/global.less');
/* eslint-disable no-new */
new Vue({
? el: '#app',
? router,
? store,
? template: '<App/>',
? components: { App },
});
Rem.setFontSize();2.借助px2rem 插件
- 引入
npm install ?px2rem-loader ?lib-flexible --save? ? ? ? ? ? ? ? ? ? ? ? or yarn add px2rem-loader lib-flexible --save
- 在項目入口文件main.js中引入lib-flexible
import 'lib-flexible/flexible.js'
- 在build下的 utils.js中，找到generateLoaders 方法，在這里添加。
const px2remLoader = {
? loader: 'px2rem-loader',
? options: {
? remUnit: 37.5
? }
}
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader, px2remLoader]
?if (loader) {
? ?loaders.push({
? ?loader: loader + '-loader',
? ?options: Object.assign({}, loaderOptions, {
? ? ?sourceMap: options.sourceMap
? ?})
?})
}重啟項目，會發(fā)現(xiàn)自己設置的px被轉為rem了
以上實現(xiàn)轉換適用于：
（1）組件中編寫的下的css
（2）從index.js或者main.js中import ‘…/…/static/css/reset.css’引入css
（3）在組件的中引入css
另外的情況不適用：
（1）組件中@import “…/…/static/css/reset.css (可考慮上面（2）、（3）的形式引入)
（2）外部樣式:
（3）元素內部樣式：style=”height: 417px; width: 550px;”
vue-cil 3.0 px自動轉換為rem適配移動端
1.下載postcss-pxtorem、lib-flexible
npm install lib-flexible --save-dev npm install postcss-pxtorem --save-dev
2.配置main.js
import 'lib-flexible/flexible' // px自動轉rem
3.根路徑配置postcss.config.js
module.exports = {
? plugins: {
? ? autoprefixer: {},
? ? "postcss-pxtorem": {
? ? ? "rootValue": 75, // 設計稿寬度的1/10,
? ? ? "propList": ['*'],// 需要做轉化處理的屬性，如`hight`、`width`、`margin`等，`*`表示全部
? ? }
? }
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
echarts3如何清空上一次加載的series數(shù)據(jù)
這篇文章主要介紹了echarts3如何清空上一次加載的series數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue實現(xiàn)輸入框的模糊查詢的示例代碼（節(jié)流函數(shù)的應用場景）
這篇文章主要介紹了vue實現(xiàn)輸入框的模糊查詢的示例代碼（節(jié)流函數(shù)的應用場景），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
Element實現(xiàn)動態(tài)增加多個輸入框并校驗
本文主要介紹了Element實現(xiàn)動態(tài)增加多個輸入框并校驗，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了vscode中Vue別名路徑提示的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
今天小編就為大家分享一篇vue之debounce屬性被移除及處理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue+Mockjs模擬curd接口請求的示例詳解,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細介紹了Vue 3.0雙向綁定原理的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue+ElementUI 關閉對話框清空驗證,清除form表單的操作
這篇文章主要介紹了vue+ElementUI 關閉對話框清空驗證,清除form表單的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
雖然前端UI框架大都提供文件上傳的組件，以及很多插件可供選擇，工作中可能不需要我們手寫一個上傳組件，但是從零封裝組件對學習是很有助益的。下文為大家介紹使用Vue3+TypeScript實現(xiàn)的一個文件上傳的功能，目前只實現(xiàn)上傳等基本功能，后續(xù)會逐漸對功能進行擴展2021-05-05
ElementUI 詳細分析DatePicker 日期選擇器實戰(zhàn)
這篇文章主要介紹了ElementUI詳細分析DatePicker 日期選擇器實戰(zhàn)教程,本文通過實例代碼圖文介紹給大家講解的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08