记载一下项目里 移动端的适配，主要结构为ts

首先贴代码：

import Util from "@/com/xr/lib/utils/Util";
import ProjectConfig from "../../../../../project.config";

/**
 * rem转换
 */
export default class RemUtil {
  // pc的屏幕最小宽度
  private pcMinWidth: number = 1280;
  // pc的屏幕最大宽度
  private pcMaxWidth: number = 1400;
  // pc的最小屏幕高度
  private pcMinHeight: number = 720;
  // pc的最大屏幕高度
  private pcMaxHeight: number = 800;
  // 移动端最小屏幕高度
  private h5MinWidth: number = 750;

  // 初始化
  public init() {
    // 设置根字体大小
    this.setBodyFontSize();
    // 再次执行设置字体大小
    this.setRemUnit();
    const that = this;
    // 监听浏览器的调整大小事件
    window.addEventListener('resize', ()=> {
      this.setRemUnit();
    });
    // 监听浏览器的页面显示事件
    window.addEventListener('pageshow', (e)=> {
      if (e.persisted) {
        that.setRemUnit();
      }
    });
    ProjectConfig.log("font-size:" + parseInt(String(this.getFontSize())) + " dpr:" + this.getDrp() + " width:" + document.documentElement.clientWidth);
  }

    
  private getFontSize() {
    let docEl = document.documentElement;
    // 获取drp（设备像素比），
    let dpr = this.getDrp();
    // 这里工具包判断了此设备是不是移动端。
    if (Util.isPhone()) {
      if(dpr >= 2) {
        dpr = 1;
      }
      // 这里就是手机端的适配啦 。返回的是一个像素应该表示多大
      //手机端 
      return (docEl.clientWidth / this.h5MinWidth) * 10 * dpr;
    } else {
      // 这里是web端的配置。
      dpr = 1;
      //web端
      let w = docEl.clientWidth;
      if(w < this.pcMinWidth) {
        w = this.pcMinWidth;
      }else if(w > this.pcMaxWidth) {
        w = this.pcMaxWidth;
      }
      let h = docEl.clientHeight;
      if(h < this.pcMinHeight) {
        h = this.pcMinHeight;
      }else if(h > this.pcMaxHeight) {
        h = this.pcMaxHeight;
      }
      let n1 = (w / this.pcMinWidth) * 10 * dpr;
      let n2 = (h / this.pcMinWidth) * 10 * dpr;
      let n = n1;
      if(n1 < n2) n = n2;
      return n;
    }
  }

  private setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = this.getFontSize() + "px";
    } else {
      // MDN解析：当初始HTML文档已完全加载和解析时，将触发DOMContentLoaded事件，而不需要等待样式表，图像和子框架页面加载（事件可以用来检测HTML页面是否完全加载完毕(fully-loaded)）。
      document.addEventListener('DOMContentLoaded', this.setBodyFontSize);
    }
  }

  private setRemUnit() {
    let docEl = document.documentElement;
    docEl.style.fontSize = this.getFontSize() + 'px';
  }
  // css像素：css中的绝对单位，移动端适配的相对单位。不同的1px在不同的移动端有不同的表现。
  // 设备像素（device pixels)： 单位是pt，指的是屏幕上的一个像素点。
  // 设备独立像素（Device Independent Pixel）：可以通过程序控制使用的像素，包含css像素。在js中，可以通过window.sceen.width/height来查看，
  // 设备像素比（dpr）:简称dpr，可以通过window.devicePixelRatio来获取。代表设备独立像素到设备像素的转换关系 
  // 计算公式：设备像素比（dpr） =设备像素也叫物理像素（dp） / css像素也叫设备独立像素

  private getDrp(): number {
    // 获取到网页根元素
    let docEl = document.documentElement;
    // 获取网页的设备像素比
    let dpr = window.devicePixelRatio || 1;
    // 当dpr大于或者等于2时
    if (dpr >= 2) {
      var fakeBody = document.createElement('body');
      var testElement = document.createElement('div');
      fakeBody.appendChild(testElement);
      docEl.appendChild(fakeBody);
      if (testElement.offsetHeight === 1) {
        docEl.classList.add('hairlines');
      }
      docEl.removeChild(fakeBody);
    }
    return dpr;
  }
}

这里的内容要记一下

  // css像素：css中的绝对单位，移动端适配的相对单位。不同的1px在不同的移动端有不同的表现。
  // 设备像素（device pixels)： 单位是pt，指的是屏幕上的一个像素点。
  // 设备独立像素（Device Independent Pixel）：可以通过程序控制使用的像素，包含css像素。在js中，可以通过window.sceen.width/height来查看，
  // 设备像素比（dpr）:简称dpr，可以通过window.devicePixelRatio来获取。代表设备独立像素到设备像素的转换关系 
  // 计算公式：设备像素比（dpr） =设备像素也叫物理像素（dp） / css像素也叫设备独立像素

建议：
// 实际开发中做移动端适配的时候，要写一套pc端代码，一套移动端代码。不要掺在一起写。会很乱很臃肿。
其他的适配方案还有很多，就不在一一叙述。