vue如何使用rem适配

1.开发环境 vue
2.电脑系统 windows10专业版
3.在使用vue开发移动端的过程中,我们会因为兼容性而头疼,下面我来分享分享下面vue使用rem自适配,希望对你有所帮助。
4.废话不多说,直接上操作:

//安装 postcss-pxtorem
npm i postcss-pxtorem -S

5.在src目录新建rem文件夹,下面新建rem.js,添加如下代码:

//基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem() {
 const salepro = document.documentElement.clientWidth / 750
 // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改.
 // 设置页面根节点字体大小
 document.documentElement.style.fontSize = (baseSize * Math.min(salepro, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
 setRem()
}

6.在项目根目录新建 .postcssrc.js,添加代码如下:

module.exports = {
 "plugins": {
 "postcss-pxtorem": {
  "rootValue": 37.5,
  "propList": ["*"]
 }
 }
}

注意:我在配置中,比例是1:1,也就是设计图宽是750px,你在css中直接写width:750px;就可以啦,不用进行换算,是不是很棒。

7.在main.js中引入

import '@/rem/rem.js'

8.在vue模板中使用,css中添加如下代码:

<style lang="scss" scoped>
.about {
 width: 750px;
 height: 100vh;
 box-sizing: border-box;
 background-color: blue !important;
 .kk {
  width: 350px;
  height: 350px;
  background-color: red;
 }
}
</style>

9.效果图如下:

10.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。

以上就是vue如何使用rem适配的详细内容，更多关于vue使用rem适配的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • vue使用rem实现 移动端屏幕适配

    要想移动端适配 并使用 rem  您需要先看这篇文章,配置好less ➡️ 在vue 中使用 less,就可以使用rem了 如果项目已经开发的差不多了,没有用到rem 又要使用rem,您用这招. postcss-pxtorem:转换px为rem的插件 安装 postcss-pxtorem npm install postcss-pxtorem --save 新建rem.js文件 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前

  • vue中的适配px2rem示例代码

    vue中的适配px2rem示例代码

    前言 做移动端时,适配 是必须的.使用rem单位,可在不同屏幕上完美显示相同的布局.px2rem 插件方便的将px单位转为了rem. px2rem 地址:https://www.npmjs.com/package/px2rem 这应该是vue项目在适配移动端时候,最简单的方法之一 下面是基本步骤(使用cnpm) 1.下载并引入lib-flexible cnpm install --save lib-flexible 在main.js中 :import 'lib-flexible/flexible

  • 关于vue利用postcss-pxtorem进行移动端适配的问题

    刚开始我按照网上的一些方式利用postcss-pxtorem方式去适配的时候怎么样都不成功,后来经过自己不断尝试之后终于成功了.稍微坐下总结: 1.个人建议在进行postcss-pxtorem适配的时候利用webpack进行项目配置,而不要用webpack-simple,因为webpack里面很多插件加载器之类的都是给你预配好的,这样在项目构建中就不会遗漏什么. 2.cnpm install postcss-pxtorem -D安装postcss-pxtorem,此插件如果你用的是webpack

  • Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)

    今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在 main.js 引入适配包 import Vue from 'vue' import App from './App.vue' import 'lib-flexible' // 引入适配包 Vue.config.productionTip = false new Vue({ render: h =>

  • 详解vue2.0 不同屏幕适配及px与rem转换问题

    详解vue2.0 不同屏幕适配及px与rem转换问题

    因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没商量. 第一步:因为rem是根据更元素来计算大小,所以,捕捉到当前屏幕的大小并赋值给html,这是其一 第二步:使用px2rem插件,来捕捉当前项目的所有px,直接计算相对应数值. 这样,以后写界面,就可以直接用px来构建界面,不用自己去计算啦! 1.安装插件(我是安装了淘宝镜像,所以是cnpm,若

  • vue如何使用rem适配

    vue如何使用rem适配

    1.开发环境 vue 2.电脑系统 windows10专业版 3.在使用vue开发移动端的过程中,我们会因为兼容性而头疼,下面我来分享分享下面vue使用rem自适配,希望对你有所帮助. 4.废话不多说,直接上操作: //安装 postcss-pxtorem npm i postcss-pxtorem -S 5.在src目录新建rem文件夹,下面新建rem.js,添加如下代码: //基准大小 const baseSize = 37.5 // 设置 rem 函数 function setRem()

  • vue+px2rem实现pc端大屏自适应的实例代码(rem适配)

    配置前言 项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配 实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位 px2rem是一个插件,功能是将px自动转换为rem,帮助开发者减少像素间的相互转换计算过程. 前方有坑:UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要" !

  • vue移动端屏幕适配详解

    flexible vue移动端屏幕适配,查看项目地址 效果预览 # 项目clone git clone git@github.com:NicolasGui/flexible.git # 进入项目目录 cd flexible # 安装依赖 npm install # 启动服务 localhost:8080 npm run dev 原理概述 插件安装 # 插件一:amfe-flexible npm install amfe-flexible --save #  插件二: node-sass npm

  • vue移动端自适应适配问题详解

    vue移动端自适应适配问题详解

    1.vue ui创建项目 2.选择基本配置项 3.运行项目 4.新建rem.js文件 // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改. const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSiz

  • 浅谈vue 移动端完美适配方案

    前言:根据最近做的一个医疗手机端项目总结在移动端,vue怎么在不同屏幕上做根据不同屏幕大小适配 1.适配方案 在本项目中我所使用的vue移动方案是使用amfe-flexible 和 postcss-pxtorem 结合)的方式. 首先介绍一下amfe-flexible amfe-flexible 是配置可伸缩布局方案,主要是将 1rem 设为 viewWidth/10. 然后就是这个库 postcss-pxtorem postcss-pxtorem是postcss的插件,用于将像素单元生成rem

  • vue中的rem如何配置

    目录 vue中rem的配置 1.在js中统一计算进行配置 2.借助px2rem 插件 vue-cil 3.0 px自动转换为rem适配移动端 1.下载postcss-pxtorem.lib-flexible 2.配置main.js 3.根路径配置postcss.config.js vue中rem的配置 开发移动端,我们常常会因为把握不好尺度而觉得十分难受,因此可以用到rem+flex进行,那么vue中我们该如何如何配置呢? 1.在js中统一计算进行配置 新建src/utils/rem.js 代码

  • flexible.js实现移动端rem适配方案

    需要了解的基础知识: 物理像素:物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果. 设备独立像素:也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素),然后由相关系统转换为物理像素. 设备像素比:简称为dpr,其定义了物理像素和设备独立像素的对应关系.它的值可以按此公式计算得到:设备像素比 ＝ 物理像素 / 设备独立像素

  • vue大屏展示适配的方法

    vue大屏展示适配的方法

    本文实例为大家分享了vue大屏展示适配的具体代码,供大家参考,具体内容如下 1.utils文件夹建一个文件cv以下代码 export function useIndex (appRef) { // * appRef指向最外层容器 // * 定时函数 let timer = null // * 默认缩放值 const scale = { width: '1', height: '1' } // * 设计稿尺寸(px) const baseWidth = 1920 const baseHeight

  • vue做移动端适配最佳解决方案(亲测有效)

    vw 解决方案 1. 安装并配置PostCss插件 复制代码 代码如下: npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S 2. 对 PostCss 进行配置 找到在根目录中的.postcssrc.js,对PostCSS插件进行配置 module.exports = { "plugins":

随机推荐