Vue移动端基于vw适配方案（简单）移动端相关术语解析（易懂）

移动端相关术语解析（易懂）

屏幕相关

• 屏幕大小
  指屏幕的对角线长度，单位是英寸(inch)。常见尺寸有：3.5寸、4.7寸、5.0寸、6.0寸
  备注：1英寸（inch） = 2.54厘米（cm）
  

• 屏幕分辨率
  指屏幕在:横向、纵向上所拥有的物理像素点总数。
  一般表示用n * m表示。例如: iPhone 6的屏幕分辨率为750* 1334

• 屏幕密度（ppi）
  表示沿着对角线，每英寸所拥有的像素（pixel）数目，PPI的数值越高，代表显示屏能够以越高的密度显示图像，即通常所说的分辨率越高，图像更清晰。

像素相关

• 物理像素
  物理像素（分辨率）是指设备屏幕实际拥有的像素点(单位是px)。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750*1334个物理像素。
  同一个设备的物理像素是固定的，这是厂商在出厂时就设置好了的。
• css像素
  又称:逻辑像素，css像素是一个抽象的长度单位（单位也是px），它是为开发者创造的，用来精确的度量开发者创造的，用来精确的度量页面上的内容大小。我们在编写css、js、less、sass中所使用的都是css像素；
• 设备独立像素(Device Independent Pixels，DIP)

引言：在没出现【高清屏】的年代，1个css像素对应1个物理像素，但自从【高清屏】问世，二者就不再是1对1的关系了。苹果公司在2010年推出了一种新的显示标准:在屏幕尺寸不变的前提下，把更多的物理像素点压缩至一块屏幕里，这样分辨率就会更高，显示效果就会更佳细腻。苹果将这种屏幕称为: Retina屏幕(又名:视网膜屏幕)，与此同时推出了配备这种屏幕的划时代数码产品——iPhone4。

设备独立像素的出现，是的即使在【高清屏】下，（例如苹果的retina屏）也能让元素元素有正常的尺寸，让代码不受设备的影响，它是设备厂商根据屏幕特性设置的，无法修改

设备像素比(Device Pixel Ratio, DPR）

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性
它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。

视口(Viewport)

视口是移动Web开发中一个非常重要的概念，最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。在苹果公司引入视口的概念后，大多数的移动开发者也都认同了这个做法。

视口简单来说就是浏览器显示页面内容的屏幕区域。在移动端浏览器中，存在着3种视口，分别是布局视口(layout viewport)、视觉视口(visual viewport) 和 理想视口(ideal viewport)

布局视口

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。根据设备的不同，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。

视觉视口

视觉视口是指用户在手机上看到的网页的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度

理想视口

与屏幕的独立像素等宽的布局视口，称之为理想视口，可以说理想视口是一种标准：让布局视口宽度与屏幕的设备独立像素等宽，靠meta标签实现

<meta name=“viewport” content="width=device-width”/>

基于vw适配方案(简单)

Vue-cli——Webpack版（Vue2/3）

插件：postcss-px-to-viewport-8-plugin、style-vw-loader

-----安装

// postcss-px-to-viewport-8-plugin 处理所有css样式，改为vw适配
// style-vw-loader 处理所有行内css样式，改为vw适配
npm install postcss-px-to-viewport-8-plugin style-vw-loader -D
or
yarn add postcss-px-to-viewport-8-plugin style-vw-loader -D
or
pnpm install postcss-px-to-viewport-8-plugin style-vw-loader -D

----在项目public目录的index.html头部加入手机端适配的meta的代码

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">

----在全局创建postcss.config.js配置文件，添加相应配置

module.exports = ({ webpack }) => {
  // 适配vant ui库，注：因vant团队的是根据375px的设计稿去做的，理想视口宽度为375px，所以兼容适配
  const webpackPath = webpack.resourcePath.split('\\')
  const designWidth = (webpackPath.includes("node_modules") || webpackPath.includes("vant")) ? 375 : 750;

  return {
    plugins: {
      autoprefixer: {},// 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
      "postcss-px-to-viewport": {
        unitToConvert: "px",// 要转化的单位
        viewportWidth: designWidth,// UI设计稿的宽度
        unitPrecision: 6,// 转换后的精度，即小数点位数
        propList: ["*"],// 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: "vw",// 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: [], // 指定不转换为视窗单位的类名，
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
        exclude: [], // 设置忽略文件，用正则做目录名匹配
        landscape: false// 是否处理横屏情况
      }
    }
  };
};

----在全局创建vue.config.js文件，添加相应配置

module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .test(/\.vue$/)
      .use('style-vw-loader')
      .loader('style-vw-loader') //因行内样式不能转换vw，可以使用此插件解决
  }
}

Vite——Rollup（Vue3）

插件：vite-plugin-style-vw-loader

-----安装

// postcss-px-to-viewport-8-plugin 处理所有css样式，改为vw适配
// vite-plugin-style-vw-loader 处理所有行内css样式，改为vw适配
npm install postcss-px-to-viewport-8-plugin vite-plugin-style-vw-loader -D
or
yarn add postcss-px-to-viewport-8-plugin vite-plugin-style-vw-loader -D
or
pnpm install postcss-px-to-viewport-8-plugin vite-plugin-style-vw-loader -D

----在项目根目录下的index.html头部加入手机端适配的meta的代码

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">

----在全局创建postcss.config.js配置文件，添加相应配置

module.exports = ({ webpack }) => {
  // 适配vant ui库，注：因vant团队的是根据375px的设计稿去做的，理想视口宽度为375px，所以兼容适配
  const webpackPath = webpack.resourcePath.split('\\')
  const designWidth = (webpackPath.includes("node_modules") || webpackPath.includes("vant")) ? 375 : 750;

  return {
    plugins: {
      autoprefixer: {},// 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等
      "postcss-px-to-viewport-8-plugin": {
        unitToConvert: "px",// 要转化的单位
        viewportWidth: designWidth,// UI设计稿的宽度
        unitPrecision: 6,// 转换后的精度，即小数点位数
        propList: ["*"],// 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
        viewportUnit: "vw",// 指定需要转换成的视窗单位，默认vw
        fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
        selectorBlackList: [], // 指定不转换为视窗单位的类名，
        minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
        mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
        exclude: [], // 设置忽略文件，用正则做目录名匹配
        landscape: false// 是否处理横屏情况
      }
    }
  };
};

----在全局创建vite.config.js文件，添加相应配置

import { fileURLToPath, URL } from "node:url";
import vitePluginStyleVwLoader from "vite-plugin-style-vw-loader";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vitePluginStyleVwLoader(), vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

到这里就结束了，后续还会更新 vue 系列相关，还请持续关注！
感谢阅读，若有错误可以在下方评论区留言哦！！！

推荐文章👇

移动端布局之postcss-px-to-viewport（兼容vant）
深入理解移动端像素知识与Viewport知识
屏幕信息大全