前端适配方案

前端适配是指确保Web应用或网站在不同设备、屏幕尺寸、分辨率、浏览器以及操作系统上都能提供良好的用户体验。因为用户可能通过各种设备访问你的网站，包括桌面电脑、平板、手机，甚至是智能手表和电视。以下是进行前端适配时应考虑的关键策略和技术：

1、百分比布局

在编写样式时，尽量使用 百分比单位 来设置元素的宽度 (width)，而非固定像素值。这样一来，元素就能随着容器的大小自动调整，实现响应式设计。比如，width: 50%; 表示元素占据其父容器宽度的一半。这种方式在页面尺寸变化时能保持良好的流动性和自适应性，max-height，min-height等

2、使用vw和vh

vw是相对于当前视口的宽度，最大为100vw，50vw就是当前视口宽度的百分之五十

3、使用rem和em

rem是相对于html根节点的font-size；em是相对于父节点的font-size
浏览器端可以搭配resize事件使用，动态去修改html元素（或者父元素）中font-size的值

window.addEventListener('resize', () => { // 监听浏览器窗口大小改变
  this.$nextTick(() => {
    if (this.$refs.splitPane) {
      this.height = document.body.clientHeight - this.$refs.splitPane.$el.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop
      this.$refs.splitPane.percent = (this.treeWidth !== 0 ? this.treeWidth : this.width) / this.$refs.splitPane.$el.offsetWidth * 100
    }
  })
})

4、使用flex布局

5、避免给父元素一个固定的高度（宽度）

6、css媒体查询

CSS媒体查询（Media Queries）是一种CSS技术，它允许我们根据设备特性来应用不同的样式规则。这些设备特性包括屏幕尺寸、分辨率、屏幕方向（横向或纵向）等。通过使用媒体查询，我们可以创建响应式网页布局，这些布局能够自适应不同尺寸和类型的设备屏幕。

基本语法

媒体查询被包含在一个@media规则中，紧跟着是媒体类型和（可选的）一个或多个媒体特性表达式。如果媒体类型或媒体特性与用户代理（通常是浏览器）的条件相匹配，则媒体查询中的CSS规则将被应用。

/* 基本媒体查询语法 */  
@media media-type and (media-feature-and-value) {  
  /* CSS 规则 */  
}  

/* 示例：当屏幕宽度大于或等于600px时应用样式 */  
@media screen and (min-width: 600px) {  
  body {  
    background-color: lightblue;  
  }  
}

媒体类型

虽然现代浏览器支持许多媒体类型，但screen、print和all是最常用的：

• screen：用于屏幕设备（如电脑显示器、平板和手机屏幕）。
• print：用于打印机。
• all：用于所有媒体类型。如果未指定媒体类型，则默认为all。
  

媒体特征

媒体查询可以使用各种媒体特性来检测设备的不同方面，例如：

• width、height：视口或屏幕的物理宽度和高度。
• min-width、min-height：视口或屏幕的最小宽度和高度。
• max-width、max-height：视口或屏幕的最大宽度和高度。
• orientation：屏幕的方向（portrait或landscape）。
• resolution：设备的分辨率。
  

7、第三方插件

引入 flexible.js

使用 flexible.js（或现代替代方案 lib-flexible），可以帮助自动调整根元素的字体大小，以此为基础，使用rem单位设置元素尺寸，从而实现不同屏幕尺寸下的完美适配。它会根据屏幕宽度动态计算一个合适的基准字体大小，让适配更加智能化

PostCSS + pxtorem

PostCss我理解的就是一套方案，并不是某一个技术的实现，使用css相关的插件来扩展css的一些功能统称为postcss
PostCSS-pxtorem 插件能够将你的CSS中的像素单位(px)自动转换为rem单位，这一步通常在构建流程中完成。通过配置根元素字体大小和转换规则，可以精确控制元素在不同分辨率屏幕上的尺寸，大大简化了适配过程，让开发者可以专注于设计本身，而非繁琐的单位换算

npm install postcss postcss-pxtorem --save-dev

项目根目录创建或编辑postcss.config.js

module.exports = {
  plugins: [
    require('postcss-pxtorem')({
      rootValue: 16, // 根元素字体大小，这里假设为16px
      propList: ['*'], // 转换所有px为rem
      unitPrecision: 5,
      selectorBlackList: [], // 不转换的选择器列表，空数组表示全部转换
      replace: true, // 直接替换属性值，而不是添加备用属性
      mediaQuery: false, // 是否在媒体查询中转换px
      minPixelValue: 0, // 设置最小转换数值，小于该值时不转换
    }),
  ],
};