广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中的rem如何配置
  • 501
分享到

vue中的rem如何配置

vue 配置vue rem配置vue配置rem 2022-11-13 13:11:09 501人浏览 八月长安
摘要

目录Vue中rem的配置1.在js中统一计算进行配置2.借助px2rem 插件vue-cil 3.0 px自动转换为rem适配移动端1.下载postCSS-pxtorem、lib-f

vue中rem的配置

开发移动端,我们常常会因为把握不好尺度而觉得十分难受,因此可以用到rem+flex进行,那么vue中我们该如何如何配置呢?

1.在js中统一计算进行配置

新建src/utils/rem.js 代码如下:

const setFontSize = (minFontSize = 12, maxFontSize = 16) => {
    // 7.5根据设计稿的横向分辨率/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';

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');

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
   })
 })
}

重启项目,会发现自己设置的px被转为rem了

以上实现转换适用于:

(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`等,`*`表示全部
    }
  }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue中的rem如何配置

本文链接: https://www.lsjlt.com/news/171328.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中的rem如何配置
    目录vue中rem的配置1.在js中统一计算进行配置2.借助px2rem 插件vue-cil 3.0 px自动转换为rem适配移动端1.下载postcss-pxtorem、lib-f...
    99+
    2022-11-13
    vue 配置 vue rem配置 vue配置rem
  • vue px转rem配置详解
    目录方法一一、配置与安装步骤: 方法二方法三总结 方法一 一、配置与安装步骤: 1、在 Vue 项目的 src 文件夹下创建一个 config 文件夹: 2、在 config 文...
    99+
    2022-11-12
  • vue px转rem怎么配置
    本篇内容主要讲解“vue px转rem怎么配置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue px转rem怎么配置”吧!方法一一、配置与安装步骤:在 Vue 项目的 s...
    99+
    2023-06-22
  • react如何配置px转换rem
    小编给大家分享一下react如何配置px转换rem,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!安装相关的依赖npm i lib-flexible --savenpm i postcss-px2rem --save主要用来...
    99+
    2023-06-14
  • vue-cli配置lib-flexible + rem如何实现移动端自适应
    这篇文章给大家分享的是有关vue-cli配置lib-flexible + rem如何实现移动端自适应的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。安装flexiblenpm&nb...
    99+
    2022-10-19
  • vue-cli中如何使用rem
    这篇文章将为大家详细讲解有关vue-cli中如何使用rem,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.rem.js内容  ! func...
    99+
    2022-10-19
  • react配置px转换rem的方法
    安装相关的依赖 npm i lib-flexible --save npm i postcss-px2rem --save 主要用来暴露项目配置 npm run eject !...
    99+
    2022-11-12
  • vue中怎么使用rem适配移动端屏幕
    这篇“vue中怎么使用rem适配移动端屏幕”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue中怎么使用rem适配移动端屏幕...
    99+
    2023-07-04
  • Vue中的baseurl如何配置
    目录Vue baseurl配置Vue项目url中的BASE_URL解析总结Vue baseurl配置 最近的一个vue项目,没有config文件夹,配置baseurl废了很大劲,终于...
    99+
    2023-05-17
    Vue中的baseurl Vue中的baseurl配置 Vue配置baseurl
  • vue项目中如何使用rem替换px
    这篇文章主要讲解了“vue项目中如何使用rem替换px”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue项目中如何使用rem替换px”吧!工具vue-cl...
    99+
    2022-10-19
  • vue中如何配置axios
    本文小编为大家详细介绍“vue中如何配置axios”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue中如何配置axios”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。配置方法首先用npm安装npm ...
    99+
    2023-07-04
  • 使用rem如何适配移动设备
    使用rem如何适配移动设备?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1. 动态改变 html 的 font-size 值几乎在每个浏览器都将 html 的 ...
    99+
    2023-06-08
  • 如何理解Vue中的props 配置
    如何理解Vue中的props 配置,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。<template>  <div cl...
    99+
    2023-06-25
  • vue devserver如何配置
    这篇文章主要介绍“vue devserver如何配置”,在日常操作中,相信很多人在vue devserver如何配置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue devs...
    99+
    2023-07-04
  • vue中如何配置proxy代理
    目录vue配置proxy代理proxy常用参数说明关于/api的详解部署因为/api无法请求到数据总结vue配置proxy代理如果你的前端应用和后端 API 服务器没有运行在同一个主...
    99+
    2023-01-14
    vue配置proxy代理 vue配置代理 proxy代理配置
  • Vue中使用Echarts响应式布局flexible.js+rem适配方案详解
    目录一、vue集成flexible方案第一种:在编译的时候自动转换(px2rem-loader)第二种:直接在写css样式的时候转换(cssrem)二、安装&配置lib-fl...
    99+
    2023-01-07
    Vue flexible.js+rem适配 Vue 使用Echarts 响应式布局flexible.js+rem
  • vue如何配置路由
    在vue中配置路由的方法:1.新建项目,引入vue和vue-router;2.使用Vue.use方法注册路由;3.执行代码配置路由;具体步骤如下:首先,在新建一个html项目,并在项目中引入vue和vue-router;import Vue...
    99+
    2022-10-25
  • vue打包的时候如何自动将px转成rem
    这篇文章将为大家详细讲解有关vue打包的时候如何自动将px转成rem,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。px2rem-loader 需要与 flexible 配...
    99+
    2022-10-19
  • html5页面中rem布局适配的示例分析
    小编给大家分享一下html5页面中rem布局适配的示例分析,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!rem 布局适配方案主要方法为:按照设计稿与设备宽度的比例,动态计算并设置 html 根标签的 font-size 大...
    99+
    2023-06-09
  • vue+px2rem实现pc端大屏自适应的实例代码(rem适配)
    配置前言 项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配 实现原理:每次打包,webpack通过使用插件postcss...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作