1.为什么使用rem做适配？

答：当你使用px做单位的时候，在不通分辨率的手机型号，他显示的大小就是设定的多少px，当手机尺寸大时，那么元素就会显得很小，当手机分辨率过小时，元素就会显得很大，因为我们引入rem单位，根据不通分辨率来做px适配，这样使元素大小更加合适。

2.使用px2rem插件

将px转为rem，书写的时候直接写px就可以，编译的时候会将px单位自动转换为对应的rem单位

第一步：安装postcss-px2rem

npm add postcss-px2rem

第二步：在 vue.config.js 中添加配置

const px2rem = require('postcss-px2rem')const postcss = px2rem({remUnit: 16   //基准大小 baseSize，需要和rem.js中相同
})module.exports = {css: {loaderOptions: {postcss: {plugins: [postcss]}}}
}

第三步：添加 rem.js文件

在src下我们新建一个config文件夹，在文件夹中新建rem.js文件、加入以下代码

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

第四步：引入rem.js文件

在main.js引入rem.js文件

import './config/rem'  //px转rem

第五步：重启服务

npm run server

这样配置就完成了、我们可以看看效果

特别注意：

①如果在行内写px单位的话是不会转换成rem单位的，
②如果使用UI库必须要在行内写样式大小的话，要转换为rem书写
③无需转换rem的可以写Px或者PX

vue项目中字体自适应屏幕(使用px2rem插件)相关推荐

vue2项目中实现字体自适应（使用px2rem插件将px转rem）
1.安装px2rem插件 npm add postcss-px2rem 2.配置 (1)在src下的utils目录中新建px2rem.js文件(没有utils就新建一个) px2rem.js // 基 ...
Tinymce富文本编辑器在vue项目中的使用；引入第三方插件和上传视频、图片等
先放张效果图第一步:安装依赖 npm install tinymce@5.0.12 第二步:在项目中的public文件夹中新建tinymce文件夹(因为我的项目是脚手架创建的,所以公共文件夹是pub ...
vue-tour快速入门：VUE项目中如何使用vue-tour新手引导指引插件？怎样使用？包含具体实例
官网: Vue Tour | A lightweight and customizable tour plugin for use with Vue.jshttps://pulsardev.githu ...
vue中echarts自适应屏幕大小
vue中echarts自适应屏幕大小,延迟执行项目中出现echarts适应屏幕大小,有时会遇到不管屏幕大小如何变化echarts图表大小不变的情况:或者出现图表变化延迟的情况,针对这两种情况,分别解 ...
fabricJs 在vue项目中的实战记录（四）添加文字以及文字的操作[字体大小、颜色、字间距、行间距、透明度、加粗、斜体、下划线、删除线、对齐方式、字体设置]
在阅读以下文章的基础上查看本篇笔记: 第一篇:fabricJs 在vue项目中的实战记录(一)引入以及初始化第二篇:fabricJs 在vue项目中的实战记录(二)fabricjs设置海报背景(图片 ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
Vue项目中particles的使用，来实现屏幕飘浮小星星动画（满天星）
Vue项目中particles的使用,来实现屏幕飘浮小星星动画(满天星) 下载包可采用npm/cnpm npm/cnpm install particles.js --save 这里附上git地址:h ...
vue 不生效打包样式_解决在vue项目中webpack打包后字体不生效的问题
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效.如图: 打开控制台查看元素样式,发现在开发环境的时候"微软雅黑"被解析成unic ...
vue项目中引入字体包
问题: 项目开发过程中,因UI的显示要求,需要引入一些字体,那如何引入外部字体呢?很简单,只需要以下3步一下载对应的字体包文件,放置到我们的项目中比如我需要PingFangSC的系列字体,我 ...

vue项目中字体自适应屏幕(使用px2rem插件)

1.为什么使用rem做适配？

2.使用px2rem插件

第一步：安装postcss-px2rem

第二步：在 vue.config.js 中添加配置

第三步：添加 rem.js文件

第四步：引入rem.js文件

第五步：重启服务

vue项目中字体自适应屏幕(使用px2rem插件)相关推荐

最新文章

热门文章