zoukankan      html  css  js  c++  java
  • vue中实现移动端rem完美适配vant

    移动端项目主要是根据屏幕大小来动态设置元素的尺寸,需要在项目中安装两个模块:postcss-pxtorem和amfe-flexible。

    vant组件官方说明:https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage

    模块说明:

    1、安装命令:

    npm install postcss postcss-pxtorem --save-dev
    npm i lib-flexible

    2、设置postcss

    修改根目录下的postcss.config.js 文件(如果没有这个文件,可以手动添加一份)

    // postcss.config.js
    module.exports = {
      plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        'postcss-pxtorem': {
          rootValue({ file }) {
         // vant得设计稿是按照375设计的,而我们得设计稿是按照750来设计的,所以vant按37.5走,750的设计稿按75走,换算基准都是设计稿得十分之一,这是因为lib-flexible是将设计稿分为10分之一来做的适配
    return file.indexOf('vant') !== -1 ? 37.5 : 75; }, propList: ['*'], }, }, };

    3、引入 lib-flexible(两种方式都行,二选一)

    在main.js中引入 lib-flexible 即可

    // main.js
    import 'lib-flexible'

    也可以在 public/index.html 文件的 <head> 标签中引入

    // public下的index.html
    <
    script src="./node_modules/lib-flexible/index.js"></script>

    4、重启项目即可,页面布局时正常写 px 即可

  • 相关阅读:
    nginx
    mysql
    intelij maven
    redis命令大全
    绑定touch事件后click无效,vue项目解决棒法
    新的用法
    img
    vuedragable
    自己总结
    vuex的项目在id中不能运行
  • 原文地址:https://www.cnblogs.com/rzsyztd/p/14212513.html
Copyright © 2011-2022 走看看