一.基本概念：

（1）移动端兼容性处理：主要处理webkit (opens new window)内核即可。

（2）解决屏幕适配问题的方案：

与视口相关的视口标签 (opens new window)的设置（即移动端屏幕有多宽我们布局的视口就有多宽） layout view 视觉视口 ideal view理想视口

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">//移动端默认视口宽度为980px，为了适应不同宽度的屏幕，需要将width等于设备宽度。
<meta http-equiv="x-UA-compatible" content="ie-edge">

（3）物理像素比的问题：

屏幕开发清晰度问题，在pc端1px对应1个物理像素点，但是移动端的1px对应的物理像素点个数不一定，1px对应的物理像素越多，清晰度越高。 如：PC端的1个物理像素点对应的1px显示在移动端可能就是0.5px。

解决方案：倍图。如制作一个比实际大两倍的图片，然后手动缩小2倍，在移动端由于像素比则刚好是我们要的清晰度

移动端切图：PScutterman中1x,2x,3x就是倍率

（4）二倍精灵图的处理：

先在切图工具中缩放两倍后记录下坐标和尺寸，然后在代码中填入相应信息，如

 background: url(../img/jd-sprites.png) no-repeat -80px 0;	位置
 background-size: 200px auto;	缩放后的尺寸

（5）移动端特殊样式的处理

-webkit-box-sizing:border-box //采用c3盒模型
-webkit-tab-highlight-color:transparent //点击默认高亮效果
-webkit-appearance:none //去除输入框，按钮的自定义样式
-webkit-touch-callout:none //禁止长按页面时的弹出菜单。

二.布局方案

1.流式布局（百分比布局）

2.弹性布局

3.less+rem+vw

(1)初始化样式

以视觉设计稿750px宽度的为例，那么100vw = 750px，即1vw = 7.5px。

将html根元素的字体大小设置为13.3333333vw就表示100px(100/7.5).

html{
	font-size: 13.33333333vw;
}
/* 防止字体过大 ,屏幕大小不超过750px*/
@media (min-width:750px){
 html{
  font-size: 100px;
 }
}

(2)使用rem单位

rem单位以根元素的字体大小为标准，此时1rem即为100px。

4.rem+js初始化文件

(function (designWidth, maxWidth) {
    var doc = document,
        win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem, rootStyle;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (!maxWidth) {
            maxWidth = 540;
        }
        
        if (width > maxWidth) {
            width = maxWidth;
        }
        //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
        var rem = width * 100 / designWidth;
        //兼容UC开始
        rootStyle = "html{font-size:" + rem + 'px !important}';
        rootItem = document.getElementById('rootsize') || document.createElement("style");
        if (!document.getElementById('rootsize')) {
            document.getElementsByTagName("head")[0].appendChild(rootItem);
            rootItem.id = 'rootsize';
        }
        if (rootItem.styleSheet) {
            rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
        } else {
            try {
                rootItem.innerHTML = rootStyle
            } catch (f) {
                rootItem.innerText = rootStyle
            }
        }
        //兼容UC结束
        docEl.style.fontSize = rem + "px";
    }
    refreshRem();

    win.addEventListener("resize", function () {
        clearTimeout(tid); //防止执行两次
        tid = setTimeout(refreshRem, 300);
    }, false);

    win.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            clearTimeout(tid);
            tid = setTimeout(refreshRem, 300);
        }
    }, false);

    if (doc.readyState === "complete") {
        doc.body.style.fontSize = "16px";
    } else {
        doc.addEventListener("DOMContentLoaded", function () {
            doc.body.style.fontSize = "16px";
        }, false);
    }
})(375, 750);

5.响应式页面兼容移动端:

（1）响应式布局原理

响应式布局基于媒体查询来设置屏幕宽度。所以在响应式布局中也可以使用媒体查询。 快速开发响应式布局的框架如bootstrap,它的原理包括：

（2）bootstarp原理:

布局容器

<div class="container"></div>//固定宽度
<div class="container-fluid"></div>//100%布局，适合单独做移动端开发

栅格系统

@media screen and (max-width:768px){
	container:100%
}//col-xs-超小屏幕：<768px,设置宽度100%
@media screen and (min-width:768px){
	container:750px
}//col-sm-小屏幕：>=768,设置宽度750px
@media screen and (min-width:992px){
	container:970px
}//col-md-中等屏幕：>=992px,设置宽度970px
@media screen and (min-width:1200px){
	container:1170px
}//col-lg-大屏：>=1200px,设置宽度1170px

<div class="col-xs-6 col-md-3"></div>//在屏幕划分为12份前提下，超小屏幕时该盒子占据6份，中等屏幕时占据3份
<div class="col-sm-offset-4"></div>//列向右偏移4个列的宽度
<div class="col-md-push-4"></div>//右推
<div class="col-md-pull-4"></div>//左拉
<div class="hidden-sm"></div>//在超小屏幕下隐藏

//在栅格系统列嵌套时会出现不能完全填充父盒子的问题，可以在他们的外面的加一个div来解决该问题,如以下。
div class="container">
	<div>
	  <div class="col=md-6"></div>
	  <div class="col=md-6"></div>
	</div>
</div>

三.Vue3 + Ts + Vite vw方案布局实践

安装 vw 支持依赖

可以帮助我们将普通单位转换为 vw/vh

npm install postcss-px-to-viewport -D

配置

//vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import postcsspxtoviewport  from 'postcss-px-to-viewport'//没有 ts 声明可能会警告，声明一下

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数
      dts: "src/auto-import.d.ts", // 生成 `auto-import.d.ts` 全局声明
    }),
  ],
  css:{
    //vite中已经内联了postcss，所以并不需要额外的创建 postcss.config.js文件
    postcss:{
      plugins:[
        postcsspxtoviewport ({
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 750, // UI设计稿的宽度,一般为320或750
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ['ignore-'], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          landscape: false // 是否处理横屏情况
        })
      ]
    }
  }
});

TS 声明

//src/pxToViewportDeclare.d.ts
//注意：*.d.ts文件放置的目录与tsconfig.json文件指定的includes匹配列表路径要一致
declare module "postcss-px-to-viewport" {

  type Options = {
    unitToConvert: "px" | "rem" | "cm" | "em";
    viewportWidth: number;
    viewportHeight: number; // not now used; TODO: need for different units and math for different properties
    unitPrecision: number;
    viewportUnit: string;
    fontViewportUnit: string; // vmin is more suitable.
    selectorBlackList: string[];
    propList: string[];
    minPixelValue: number;
    mediaQuery: boolean;
    replace: boolean;
    landscape: boolean;
    landscapeUnit: string;
    landscapeWidth: number;
  };
  //这里可能会警告：已定义未使用，我目前不太清楚为啥，上面 vite.config.ts 文件中明明已经运用了... 
  //Partial 表示属性是可选的，非必填的
  export default (options: Partial<Options>) => any;
}

引入声明文件

//tsconfig.node.json
{
  "compilerOptions": {
    "composite": true,
    "module": "esnext",
    "moduleResolution": "node"
  },
  "include": ["vite.config.ts","pxToViewportDeclare.d.*", "src/pxToViewportDeclare.d.ts"]
}

另外再写一下Vue2版本的吧

npm i postcss-px-to-viewport --save-dev

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

很简单的配置，vue2版本不需要配置声明。等以后 postcss-px-to-viewport 内置声明，以后 vue3 也就不需要写声明了。