vue项目pc端使用rem进行适配（lib-flexible+postcss-pxtorem）

1、使用vue-cli创建项目

vue create my-app

2、安装lib-flexible与postcss-pxtorem依赖

npm install lib-flexible -Snpm install postcss-pxtorem -D

安装成功后，在package.json文件可找到依赖相关版本信息，如图所示

3、在main.js引入 lib-flexible

import "lib-flexible/flexible";

4、找到目录：node_modules/lib-flexible/flexible.js ，修改flexible.js；（不要直接搜索，搜不到的）（配置移动端适配跳过这一步骤）

5、在根路径中 (与 main.js 平级) 创建 .postcssrc.js 文件

// postcss 配置文件
module.exports = {// 配置需要使用的postcss插件plugins: {'postcss-pxtorem': {rootValue: 144,   // 这里应该 UI 图的十分之一propList: ['*']}}
}

6、经过上面的步骤就全部配置好了，接下来就可以根据UI图写了

vue项目pc端使用rem进行适配（lib-flexible+postcss-pxtorem）相关推荐

Vue项目pc端适配方案（scss）
前言:vue项目适配可借助于插件lib-flexible 和postcss-px2rem. lib-flexible插件的作用:根据屏幕尺寸不同设置html根标签的字体大小,1rem即等于根标签的字体 ...
vue项目PC端屏幕分辨率与窗口大小自适应
效果 #mermaid-svg-O0n9N0Pq5xuLBK3e .label{font-family:'trebuchet ms', verdana, arial;font-family:var(- ...
vue的pc端适配vw vh rem
安装命令: npm i postcss-px-to-viewport@1.1.1npm i postcss-pxtorem@5.1.1 2.安装完之后在根目录新建postcss.config.js(和 ...
基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
PC端的一些简单适配
PC端的一些简单适配不同比例的屏幕需要展示的内容一样 16:9 24:9 32:9的屏幕比例需要显示同样的内容主要是使用的是rem布局, 这里通过调节不同分辨率的时候, 左边盒子和中间盒子的宽度比 ...
前端pc端、手机端适配基本知识
前端pc端.手机端适配问题一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
vue 调用pc端本地摄像头、麦克风实现拍照、录视频、录音并上传到服务器指定树文件夹
vue 调用pc端本地摄像头.麦克风实现拍照.录视频.录音并上传自己写blog只是为了下次方便使用过程确实很烦 ,自己摸索加各大网站cv查看可以直接使用 1.调用摄像头拍照录屏首先是npm ...
vue项目微信端清理缓存问题解决
vue项目微信端清理缓存问题解决参考文章: (1)vue项目微信端清理缓存问题解决 (2)http://www.cnblogs.com/sakura-lifangfang/p/9660550.htm ...
vue的PC端和移动端分辨率适配
使用lib-flexible和px2rem实现移动端和PC端界面适配注释:lib-flexbles是由阿里团队很早提出解决屏幕分辨率适配的问题.现已不被推荐(因为目前比较主流的适配方案是使用vw和v ...

vue项目pc端使用rem进行适配（lib-flexible+postcss-pxtorem）

vue项目pc端使用rem进行适配（lib-flexible+postcss-pxtorem）相关推荐

最新文章

热门文章

vue项目pc端使用rem进行适配 （lib-flexible+postcss-pxtorem）

vue项目pc端使用rem进行适配 （lib-flexible+postcss-pxtorem）相关推荐

最新文章

热门文章

vue项目pc端使用rem进行适配（lib-flexible+postcss-pxtorem）

vue项目pc端使用rem进行适配（lib-flexible+postcss-pxtorem）相关推荐