vue引入弹性布局

vue中使用flexible.js移动端自适应方案 - Qhhh的个人博客

flexible的使用

1、先安装 postcss-plugin-px2rem 和 lib-flexible

npm i --save postcss-plugin-px2rem
npm i --save lib-flexible 

2、在main.js引入 

import 'lib-flexible/flexible'

3、在vue.config.js配置

module.exports = {
    css: {
      loaderOptions: {
        stylus: {
          'resolve url': true,
          'import': [
            './src/theme'
          ]
        },
        postcss: {
          plugins: [
            require('postcss-plugin-px2rem')({
              rootValue: 37.5, //换算基数，rootValue的值应该设置为你当前开发下屏幕的宽度/10(例：屏幕宽度为375，则设置为37.5)，之后就可以在css直接使用px，插件会自动转换成相应的rem。
              // exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
              // selectorBlackList: [], //要忽略并保留为px的选择器
              // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
              // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
              mediaQuery: true, //（布尔值）允许在媒体查询中转换px。
              minPixelValue: 1 //设置要替换的最小像素值(3px会被转rem)。 默认 0
            }),
          ]
        }
      }
    }
  }

接下来可以在你的项目里使用px，打开浏览器调试工具看看是否转换成rem单位。下面我们来看一个案例。

这里我把文字的font-size设置为30px，

然后它帮我转成了0.8rem，原因是rootValue配置的37.5，那么30px/37.5=0.8rem，所以你看你页面控制台就是0.8rem。换句话说就是1rem=37.6px，0.8*37.5不就等于30了。

但是你看这个实际的font-size怎么就是43.2呢？那就要了解一下rem这个单位了（推荐rem介绍：https://www.cnblogs.com/liu-di/p/11254583.html）

所以，看上图，根节点的font-size是54px，那我们我就可以说项目里面现在这个宽度1rem等于54px，然后你现在个人博客这四个字是0.8rem，那么就是0.8*54=43.2，所以你看你实际宽度就是43.2px。

至于根节点这个font-size的属性是会变的，就是因为安装的flexible这个包，当屏幕大于540的时候它就一直是font-size：54px，当小于540宽度的时候，font-size就是根据屏幕宽度/10，然后在移动端就会随着你的根节点font-size变化去实现自适应。

关于前端网页自适应方案其他推荐

1、个人建议先写PC端再写移动端，PC端正常写就可以了，但注意以下几点可能会有很好的效果。

• 能不设置宽高的尽量不设置，让内容自己撑开。
• 少用float,如果用了记得清除浮动。
• 尽量用flex布局(父盒子设置flex-wrap:wrap，子盒子尽量设置实际宽，少用用百分比)。
• 屏幕宽度大于540建议用媒体查询，屏幕宽度小于540建议用rem（关于rem）。

2、lib-flexible版本

• 0.3.2版本：当屏幕宽度小于540进行等比例缩放，当屏幕宽度大于540将不进行缩放，并以540为基准(个人建议使用)，有特殊情况也可以下载flexible.js文件到项目，修改flexible.js文件源码中屏幕宽度540的限定。
• 2.0版本：根据屏幕宽度全程等比例缩放网页

3、原生静态页面

• 将flexible.js下载至本地并引入项目
• 推荐vscode插件px to rem & rpx (cssrem)：以自己设置基准将px计算为rem，在设置->插件->Root Font Size设置自己当前屏幕宽度/10的值(例：当前屏幕宽度为1440，则设置144)