一、vue自适应（配置postcss-px2rem）

采用插件postcss-px2rem结合动态更新根节点的font-size 的js代码共同完成，实现在不同的屏幕等比例放大或缩小页面

1. postcss-px2rem（命令行安装）

npm i postcss-px2rem --save

2. 动态更新根节点的font-size 的js代码

在app.vue的mounted函数中添加如下代码：

mounted () {const computed = function () {// 设计稿宽度：1920const desW = 1920const devW = document.documentElement.clientWidthif (devW > 1280) {document.documentElement.style.fontSize = devW / desW * 75 + 'px'// 这里的75是使用postcss-px2rem插件时，配置的remUnit的参数值} else {document.documentElement.style.fontSize = 50 + 'px'}}computed()window.addEventListener('resize', computed, false)}
// 默认字体的大小和最小展示宽度，解决网页端在平板上的样式混乱问题
#app {font-size: 14Px  !important;min-width: 1280Px;
}

3. 配置postcss-px2rem

px2rem的配置放在vue.config.js中

css: {loaderOptions: {css: {},postcss: {plugins: [require('postcss-px2rem')({// 以设计稿750为例， 750 / 10 = 75remUnit: 75 })]}}}

举个例子：
设计稿1920px,宽度300px,样式表中定义样式为300px（第一张图）,但是在浏览器中的宽度是4rem（300/75）（第二张图），在根据rem这个相对长度单位，相对于根元素(即html元素)font-size计算值的倍数，在浏览器中显示为4rem*根元素的font-size值，这就是显示的宽度

第1张图：

第2张图：

第3张图：

补充：
另一种lib-flexible（阿里伸缩布局方案）和 postcss-px2rem（px转rem）相结合来实现的方式

1.安装lib-flexible命令

npm install lib-flexible --save-dev

2.修改flexible.js 代码（全局搜索refreshRem）
这是针对移动端的源码中写死了设计方案，在安装好lib-flexible和 postcss-px2rem后，修改为下面的代码就可以了。其中的if判断是根据自己需求的
如下面代码禁掉的是原有的，新加的是但当前浏览器宽小于810则固定为810px宽，这样就实现了vue pc端自适应

function refreshRem(){var width = docEl.getBoundingClientRect().width;// if (width / dpr > 540) {//     width = 540 * dpr;// }if(width/dpr<810){width = 810 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}

3.postcss-px2rem安装及配置如上

这个方法存在小问题，他修改了安装的依赖文件flexible.js中的代码，重新拉取代码时容易忘记，知道展示效果不对时才会找到文件并修改回来

vue自适应（配置postcss-px2rem）相关推荐

vue项目中字体自适应屏幕(使用px2rem插件)
1.为什么使用rem做适配? 答:当你使用px做单位的时候,在不通分辨率的手机型号,他显示的大小就是设定的多少px,当手机尺寸大时,那么元素就会显得很小,当手机分辨率过小时,元素就会显得很大,因为我们 ...
vue2项目中实现字体自适应（使用px2rem插件将px转rem）
1.安装px2rem插件 npm add postcss-px2rem 2.配置 (1)在src下的utils目录中新建px2rem.js文件(没有utils就新建一个) px2rem.js // 基 ...
vue如何配置兼容ie es6转es5
vue如何配置兼容ie es6转es5 首先我们的明白为什么vue在ie上跑步起来, 这究竟是道德的沦丧还是人性的扭曲. 应该都不是是ie它就是不支持es6, 那么不支持es6, 那es5呢? 嗯 ...
使用Jenkins持续集成Vue项目配置Sonar任务
title: 使用Jenkins持续集成Vue项目配置Sonar任务 tags: jenkins Vue.js Sonar categories: ci date: 2017-12-05 22:09: ...
Vue安装配置以及入门案例
Vue Vue简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不 ...
webpack中loader加载器配置postCss自动添加CSS兼容前缀
配置postCSS自动添加css的兼容前缀前言在这里我使用VScode为编辑器 html文件中 <!DOCTYPE html> <html lang="en" ...
配置 postCSS 自动添加 css 的兼容前缀||打包样式表中的图片和字体文件||打包处理 js 文件中的高级语法
配置 postCSS 自动添加 css 的兼容前缀 ① 运行 npm i postcss-loader autoprefixer -D 命令 ② 在项目根目录中创建 postcss 的配置文件 pos ...
vue axios 配置上服务器后报错'Access-Control-Allow-Origin' header]（亲测）
vue项目配置到服务器后,请求能够成功,返回的数据也能在浏览器中看见,但是报错: Failed to load http://pre.api.jmxy.mockuai.c...: The value ...
[vue] 怎么配置使vue2.0+支持TypeScript写法？
[vue] 怎么配置使vue2.0+支持TypeScript写法? 配置ts-loader,tsconfig增加类型扩展,让ts识别vue文件vue文件中script里面换成ts写法, 需要增加几个t ...

vue自适应（配置postcss-px2rem）

一、vue自适应（配置postcss-px2rem）

1. postcss-px2rem（命令行安装）

2. 动态更新根节点的font-size 的js代码

3. 配置postcss-px2rem

vue自适应（配置postcss-px2rem）相关推荐

最新文章

热门文章