(改完重启项目)

一、需要实现的效果:

浏览器分辨率为33%
分辨率为100%

分辨率改变,页面都不会被影响

二、使用

1、npm安装依赖

npm install amfe-flexible --save
npm install postcss-pxtorem --save-dev

2、在main.js中引入lib-flexible

import 'amfe-flexible'

3、配置postcss-pxtorem

  vue-cli2 的配置---在 .postcss.js 文件中的plugins下新增postcss-pxtorem的配置
  vue-cli3 配置方式:在根路径下新增 postcss.config.js 文件,放入下述同样的代码
module.exports = {
  plugins: {
    'autoprefixer': {browsers: 'last 5 version'},
    'postcss-pxtorem': {
      rootValue: 192, // 根据设计图尺寸写,设计图是1920,就写192
      propList: ['*'], // 需要被转换的属性
      selectorBlackList: [] // 不进行px转换的选择器
    }
  }
}

3、直接根据设计稿的尺寸写px就行

注意:该插件不能转换行内样式中的 px

4、PC端只对指定页面做自适应(vue&postcss-pxtorem)

// 根目录的 postcss.config.js
module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 100,
      minPixelValue: 12,
      propList: ['*'],
      exclude: (e) => { // 不包含
        if (/src(\\|\/)views(\\|\/)Screen/.test(e)) { // Screen是指定页面生效
          return false;
        }
        return true;
      },
    },
  },
};

5、当分辨率改变的时候,列表的高度会缩小,如何在分辨率改变时,高度也随之自适应(不用 amfe-flexible )

vue监听元素高度指令,单个页面进行应用

// directives 与 data 同级,可以百度资料
directives:{
    resize: { // 指令的名称
        bind(el, binding) { // el为绑定的元素,binding为绑定给指令的对象
          console.log(el,"绑定",binding);
          let width = '', height = '';
          function isReize() {
            const style = document.defaultView.getComputedStyle(el);
            if (width !== style.width || height !== style.height) {
              binding.value({width:style.width,height:style.height});  // 关键(这传入的是函数,所以执行此函数)
            }
            width = style.width;
            height = style.height;
          }
          el.__vueSetInterval__ = setInterval(isReize, 300);
        },
        unbind(el) {
          console.log(el,"解绑");
          clearInterval(el.__vueSetInterval__);
        }
      }
 },

示例

monResize(data){      
    let {width,height} = data;
    console.log("width:",width,"height:",height,"   dom尺寸方式改变");
},

多页面应用:
https://www.cnblogs.com/myqinyh/p/16443370.html

可能遇到的问题:

vue 安装postcss-pxtorem插件报错:[object Object] is not a PostCSS plugin。

参考链接:https://blog.csdn.net/weixin_36724538/article/details/117469617

报错:[object Object] is not a PostCSS plugin。
报错原因:postcss-pxtorem版本太高,更改版本为5.1.1
执行命令: npm install postcss-pxtorem@5.1.1
运行: npm run dev

GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐