前端-vue移动端&&App 适配方案_vue app

一、区别

移动端和应用程序（App）是两个不同的概念。

移动端是指在移动设备上（如手机、平板电脑等）运行的操作系统，例如iOS、Android、Windows phone等。在移动端系统上可以运行各种类型的应用程序，包括原生应用程序、基于web的应用程序和混合应用程序。

应用程序（App）是指在移动设备上运行的程序，可以通过应用商店或其他途径下载安装。它们可以是原生应用程序，也可以是基于web或混合的应用程序。应用程序通常提供各种功能和服务，如社交媒体、游戏、新闻、工具、地图等。与网页不同，应用程序可以在离线状态下运行，并且通常提供更好的性能和用户体验。

所以，移动端是操作系统，而应用程序是运行在移动端上的程序。

---

rem与vw单位适配，任选其一即可，不可同时使用！

二、rem单位适配

首先我们要了解，rem单位是相对于html元素的font-size来设置的，如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的 font-size尺寸。

在实际开发工作当中，我们需要考虑两个问题：

1. 针对不同的屏幕，去设置html，也就是不同的font-size
2. 将原设置尺寸，自动转换rem单位

(1)常见的font-size 尺寸有哪些？

实时改变屏幕尺寸js代码和rem单位换算需要同时设置，两者缺一不可。

屏幕适配选其一即可。

(2)屏幕适配(简版)

ScreenAdaptive.js

const htmlEl = document.documentElement;
function setRemUnit() {
  const unit = htmlEl.clientWidth / 10;
  htmlEl.style.fontSize = unit + "px";
}
setRemUnit();
window.addEventListener("resize", function () {
  setRemUnit();
});
window.addEventListener("pageshow", function (e) {
  if (e.persisted) {
    setRemUnit();
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14

(2-1)屏幕适配(全版)

AmfeFlexible.js

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // 调整正文字体大小
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // 设置 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // 重置页面大小的rem单位
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // 检测0.5px的支持
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

(3)px单位自动转换rem

这个时候就需要用到 postcss-pxtorem 插件了

npm i postcss-pxtorem@5.1.1
1

配置文件，在根目录的.postcssrc.js下配置，如果文件没有，自己手动创建

module.exports = {
    plugins: {
      'postcss-pxtorem': {
        rootValue ({ file }) {
          return file.indexOf('vant') !==- 1?  37.5:75
        },
        propList: ['*']//属性的选择器，*表示通用
      }
    }
  }
1
2
3
4
5
6
7
8
9
10

vue.config.js中配置

module.exports = {
   lintOnSave: false
}
1
2
3

三、vw单位适配

(1)介绍

前端中的vw单位是指视口宽度的百分比，即1vw等于视口宽度的1%。

使用vw单位可以实现响应式布局，使元素的大小随着屏幕尺寸的变化而变化。

例如，设置一个元素的宽度为50vw，表示该元素的宽度为视口宽度的一半。

在移动设备上，该元素的宽度会自动调整为屏幕宽度的一半，可以更好地适应不同的设备宽度。

(2)postcss-px-to-viewport-8-plugin 插件(1.2.2版本)

注意：安装插件前，需要统一版本,直接copy

npm install postcss@8.2.8 --save
1

npm install postcss-loader@4.0.4 --save
1

npm install less@3.13.1 --save
1

npm install less-loader@7.0.1 --save
1

(3)安装插件

1.1.1

npm install postcss-px-to-viewport --save
1

1.2.2

npm install postcss-px-to-viewport-8-plugin --save
1

(4)配置postcss.config.js文件

根目录下新建postcss.config.js并 添加如下配置：

这里以1.1.1版本为示例：

module.exports = {
  plugins: {
    "postcss-px-to-viewport": {
      unitToConvert: "px", // 需要转换的单位，默认为"px"
      viewportWidth: 750, // 设计稿的视口宽度
      unitPrecision: 5, // 单位转换后保留的精度
      propList: ["*", "!font-size"], // 能转化为vw的属性列表,!font-size表示font-size后面的单位不会被转换
      viewportUnit: "vw", // 希望使用的视口单位
      fontViewportUnit: "vw", // 字体使用的视口单位
      // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
      // 下面配置表示类名中含有'keep-px'都不会被转换
      selectorBlackList: ["keep-px"],
      minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
      mediaQuery: false, // 媒体查询里的单位是否需要转换单位
      replace: true, //  是否直接更换属性值，而不添加备用属性
      exclude: [/node_modules/], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      include: [/src/], // 如果设置了include，那将只有匹配到的文件才会被转换
      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: "vw", // 横屏时使用的单位
      landscapeWidth: 1338, // 横屏时使用的视口宽度
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

四、二者优势对比

Vw单位和rem单位都是相对单位，相对于视口尺寸来定义的，它们各自有不同的优势。

• vw表示视口宽度的百分比
• rem表示根元素字体大小的倍数

Vw的优势：

• 可以直接使用视口尺寸来设定元素的宽度、高度、字体大小等属性，非常方便。
• 在响应式布局中，可以很容易地根据不同的视口尺寸来调整元素的大小，适应不同的设备。

Rem的优势：

• 可以方便地实现响应式字体大小，因为rem单位是相对于根元素字体大小的倍数。这样，无论在何种设备上，字体大小总是可以根据根元素的字体大小自适应。
• 在响应式布局中，可以通过控制根元素字体大小，来控制所有元素的大小，从而实现整体的大小调整。这比使用固定的像素值更方便和灵活。

总体来说，Vw和rem都有自己的优势，需要根据具体的需求和场景来选择使用哪种单位。