一、区别
移动端和应用程序（App）是两个不同的概念。
移动端是指在移动设备上（如手机、平板电脑等）运行的操作系统，例如iOS、Android、Windows phone等。在移动端系统上可以运行各种类型的应用程序，包括原生应用程序、基于web的应用程序和混合应用程序。
应用程序（App）是指在移动设备上运行的程序，可以通过应用商店或其他途径下载安装。它们可以是原生应用程序，也可以是基于web或混合的应用程序。应用程序通常提供各种功能和服务，如社交媒体、游戏、新闻、工具、地图等。与网页不同，应用程序可以在离线状态下运行，并且通常提供更好的性能和用户体验。
所以，移动端是操作系统，而应用程序是运行在移动端上的程序。
rem与vw单位适配，任选其一即可，不可同时使用！
二、rem单位适配
首先我们要了解，rem单位是相对于html元素的font-size来设置的，如果我们需要在不同的屏幕下有不同的尺寸，可以动态的修改html的 font-size尺寸。
在实际开发工作当中，我们需要考虑两个问题：
- 针对不同的屏幕，去设置html，也就是不同的font-size
- 将原设置尺寸，自动转换rem单位
(1)常见的font-size 尺寸有哪些？
实时改变屏幕尺寸js代码和rem单位换算需要同时设置，两者缺一不可。
| 屏幕尺寸 | html当中的font-size | 盒子的设置宽度 | 盒子的最终宽度 |
|---|---|---|---|
| 375px | 37.5px | 1rem | 37.5px |
| 320px | 32px | 1rem | 32px |
| 414px | 41.4px | 1rem | 41.4px |
屏幕适配选其一即可。
(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();
}
});
(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))
(3)px单位自动转换rem
这个时候就需要用到
postcss-pxtorem插件了
npm i postcss-pxtorem@5.1.1
配置文件，在根目录的.postcssrc.js下配置，如果文件没有，自己手动创建
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue ({
file }) {
return file.indexOf('vant') !==- 1? 37.5:75
},
propList: ['*']//属性的选择器，*表示通用
}
}
}
vue.config.js中配置
module.exports = {
lintOnSave: false
}
三、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
npm install postcss-loader@4.0.4 --save
npm install less@3.13.1 --save
npm install less-loader@7.0.1 --save
(3)安装插件
1.1.1
npm install postcss-px-to-viewport --save
1.2.2
npm install postcss-px-to-viewport-8-plugin --save
(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, // 横屏时使用的视口宽度
},
},
};
四、二者优势对比
Vw单位和rem单位都是相对单位，相对于视口尺寸来定义的，它们各自有不同的优势。
- vw表示视口宽度的百分比
- rem表示根元素字体大小的倍数
Vw的优势：
- 可以直接使用视口尺寸来设定元素的宽度、高度、字体大小等属性，非常方便。
- 在响应式布局中，可以很容易地根据不同的视口尺寸来调整元素的大小，适应不同的设备。
Rem的优势：
- 可以方便地实现响应式字体大小，因为rem单位是相对于根元素字体大小的倍数。这样，无论在何种设备上，字体大小总是可以根据根元素的字体大小自适应。
- 在响应式布局中，可以通过控制根元素字体大小，来控制所有元素的大小，从而实现整体的大小调整。这比使用固定的像素值更方便和灵活。
总体来说，Vw和rem都有自己的优势，需要根据具体的需求和场景来选择使用哪种单位。