移动端适配方案

移动端适应性布局

• 使用 rem 尺寸单位来实现

方案一

1.使用 less 配置，引入 lib-flexible 插件，或者自己获取 设备宽度计算

使用 less 自己配置

• 1. 统一样式通过变量实现
• 2. 统一共有样式抽离通过 mixin 混入实现

自己配置 js 文件，计算 rem 的值

• 在 index.html 中配置，设置根元素字体大小

// 设置 minimum-scale=1,maximum-scale=1 设置初始倍数 // 配置是否允许用户缩放
<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0,minimum-scale=1,maximum-scale=1,user-scaleable=no"
/>

// 将根元素字体大小和屏幕做绑定
document.documentElement.style.fontSize =
  document.documentElement.clientWidth / 10 + "px";
// 屏幕改变重设根元素字体大小
window.addEventListener("resize", () => {
  document.documentElement.style.fontSize =
    document.documentElement.clientWidth / 10 + "px";
});

less 配置

• 引入文件 index.less mixin.less variable.less 设置 rem 大小

方案二

使用 lib-flexible 插件

• 1.安装
  npm i lib-flexible -S
• 2.首先要引入到 main.js 中
  import "lib-flexible"
• 3.使用 flexible 所有单位要用 rem

webpack 帮助我们实现 px 转 rem 的库，，叫做 px2rem

• 1.安装

npm install px2rem
npm install px2rem-loader

• 2.插件配置
  • 在 vue.config.js s中配置

chainWebpack: (config) => {
  config.module
    .rule("less") // css 规则
    .oneOf("vue")
    .use("px2rem-loader")
    .loader("px2rem-loader")
    .before("postcss-loader") // this makes it work.
    .options({
      remUnit: 37.5,   // 设计 分辨率尺寸
      remPrecision: 8,  // rem 小数保留几位
    }) // remUnit: 192代表以1920px为整体，如果设计稿的尺寸是750px，这里的值为75
    .end();
},

• 3.使用

  • 如果哪一个样式的 px 不需要转换 rem 的话，就在后面加上 /*no*/

  .text {
    width: 300px;
    height: 300px; /*no*/
  }
  

对比 mixin 和 px2rem 实现 rem 的转换

实现原理 都是 px/baseSize + ‘rem’
mixin 需要的才去写
px2rem 全部转化不需要的自己加 /no/