基础！！不同屏幕浏览器页面尺寸适配——rem、vw、em、%、media

声明！！基础使用，介绍的也比较基础哦！有不对或需要补充的欢迎留言哦！

各单位代表什么？

1.rem，浏览器给html元素设置了一个font-size:16px样式，而rem表示html元素字体大小的像素点，也就是说，如果改了html元素样式，则改单位大小也会发生变化

默认情况下，html元素为16px，因此这个son类元素的宽度为 16 * 5 = 80px

<style>
.son{
  width:5rem
}
</style>

如果更改html的font-size样式，则son类元素的宽度也会发生变化，如下son类元素宽度变为100px

<style>
html{
  font-size:20px;
}
.son{
  width:5rem
}
</style>

2.em，跟rem类似，只不过现在的基准元素变成了父元素，即假设父元素的font-size:20px，且子元素的宽度是2em，则表示子元素的宽度是40px

3.vw，100vw表示整个可视窗口的宽度，（当然还有100vh表示整个可视窗口的高度）

4.%，表示子元素相对于父元素宽度的%，假设父元素宽度为100px，子元素宽度为1vw，则子元素宽度为1px

5.media这个单位是可以时刻监视宽度的，当达到media设置的宽度情况，会执行相关的代码

各单位的使用情况？

先说，除了media使用有些特别，其他单位使用的时候就当作一个px像素点的倍数使用即可

1.你想基于整个页面变化，你就用vw,vh

特别必用情况，比如我想画一个页面，上部分是标题，下部分是多个案例，但是我并不确定我都案例有多少，也就是不确定这个body元素的高度到底该是多少，但是我至少要保证的情况是，我看到的，也就是可视窗口有这个背景颜色，因此，可以给body元素一个 min-height:100vh

2.你想子元素基于父元素宽度变化，你就用%

特别比用情况，比如，父元素的宽度是允许随屏幕变化的，而子元素是相较于父元素保持不变的

3.同上所说，你希望子元素基于根元素的字体或父元素的字体变化，你就用rem,em

4.当你希望页面宽度变化到一定范围，发生样式上的变化，你就用media

使用情况1：比如我希望，随着宽度变化，一行中允许展示的案例数是变化的（毕竟案例的大小是不能小到影响查看，宽度一味变小，只能改变一行中的案例数）

效果展示： 好像有点看不了，大家可以去我视频里看

20250407_202359

代码如下：

  .app-store-list {
    display: grid;
    font-size: 18px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    flex-wrap: wrap;
    .app-store-item {
      min-width: 180px;
      padding: 25px 10px 30px;
      margin: 10px;
      border: solid 1px #ccc;
      background-color: rgb(245, 236, 157);
      .app-store-name {
        padding-bottom: 10px;
      }
      .app-store-describe {
        line-height: 35px;
      }
    }
  }
  @media screen and (max-width: 1000px) and (min-width: 800px) {
    .app-store-list {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
  @media screen and (max-width: 800px) and (min-width: 600px) {
    .app-store-list {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  @media screen and (max-width: 600px) and (min-width: 400px) {
    .app-store-list {
      grid-template-columns: 1fr 1fr;
    }
  }

使用情况2：当屏幕达到media限定范围，引入css样式表

<!-- 仅当屏幕宽度 ≥ 768px 时加载 -->
<link rel="stylesheet" href="desktop.css" media="screen and (min-width: 768px)">

如何让不同屏幕大小设备适应一套写死的样式宽度呢？

作为前端开发者，根据设计图去绘制时，写样式大小单位的时候，除了上面说的有些特殊情况，一般用到的单位都是px，那我根据1920px宽度设计稿写死的样式，在其他屏幕上怎么办？！

先说移动端和web端的适配，目前编编主要写的是web端页面，所以兼容移动端知道的不多，我就说说我知道的

1.首先一种情况是web端和移动端两边的布局有很大的差别，具体可以参考某购物平台在手机和电脑购物页面的显示，这就是完全两套代码了

关于两套代码，有可能它们是非常独立的，完全两套开发方式，有可能它们是内容变化不大，只是布局发生了改变，大部分内容也就是会使用到很多公共组件，这可能就是一套基本的代码，然后在识别不同的可视区尺度后，再动态使用不同的样式表。

关于第二种可能，根据可视区的大小，动态的载入不同的样式表

方法一：像上文说的，使用media

方法二：当该网页被打开时，获取当前设备，是手机端或是web端？将这变量值存入本地，往后凡是涉及到样式表选择的时候可以根据这个变量来选择

function isMobileFn() {
  navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i)
    ? (isMobile.value = true)
    : (isMobile.value = false)
  appInfo.changeIsMobile(isMobile.value)
  return isMobile.value
}

2.接下来就是常见的通过两个包，一个是将写死的px转为vw，一个是将写死的px转为rem，这两个包的配置在vite.config.js中

第一个：postcss-px-to-viewport，将px转为vw

①.导入包

pnpm i postcss-px-to-viewport -D

②.在配置文件中加上

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: 'apx', // 需要转换的单位，默认为"apx"
          viewportWidth: 1920, // 设计稿的视口宽度
          unitPrecision: 5, // 单位转换后保留的精度
          propList: ['*'], // 能转化为vw的属性列表
          viewportUnit: 'vw', // 希望使用的视口单位
          fontViewportUnit: 'vw', // 字体使用的视口单位
          selectorBlackList: ['.ignore-'], // 忽略转换正则匹配项
          minPixelValue: 1, // 最小的转换数值，如果是小于或等于这个值，则不进行转换。
          mediaQuery: false, // 是否允许在媒体查询中转换px
          replace: true, // 是否转换后直接更换属性值
        }),
      ],
    },
  },
})

主要看两个：

unitToConvert:'apx' 表示，当你使用apx单位的时候，当资源加载到浏览器后，会将apx单位基于这个 viewportWidth:1920 这个设计宽度变化，举个例子，A元素在1920px设计稿的宽度是20px，当在750px设备中打开，则A元素在流浪其的实际显示单位是 750/1920*20/1920vw

第二个：postcss-pxtorem，将px转为rem

①.导入包

pnpm i postcss-pxtorem

 ②.在配置文件中加上

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        postcsspxtorem({
          unitPrecision: 5, // 转换后保留的小数位数
          propList: ['*'], // 要转换的属性列表
          replace: true, // 是否直接替换属性值
          mediaQuery: false, // 是否允许在媒体查询中转换px
          minPixelValue: 1, // 小于或等于这个值的px单位不转换
        }),
      ],
    },
  },
})

这个配置文件没什么需要注意的， 主要是rem的配置需要在js中做一些处理

看上文的vw，vw是可以根据屏幕宽度自适应的单位，但是rem是做不到的，假设我没有更改过html元素的font-size，也就是为16px，这一特性，不论是在电脑还是手机，都是不变的，也就意味着，即使将px在浏览器解析的时候转为rem，都是元素的大小的px数量是没有变化的。

所以需要拿到设备的宽度，然后去更改html这个font-size，具体如下：

const windowWidth = Math.min(document.documentElement.clientWidth, 1920)
const fontsize = (windowWidth / 1920) * 100
document.querySelector('html').style.fontSize = fontsize + 'px'
document.body.onresize = function () {
  const windowWidth = Math.min(document.documentElement.clientWidth, 1920)
  const fontsize = (windowWidth / 1920) * 100
  document.querySelector('html').style.fontSize = fontsize + 'px'
}

稍微对上文代码解释一下哦：

为什么正数第二、三行和倒数第二、三行代码重复了，因为页面一开始就要更改html的font-size，此后当监视到宽度变化时，也需要执行更改html的font-size

第一行什么意思？始终取最小，表示，当当前页面的宽度小于1920的时候，允许页面各元素的宽度随页面发生变化，但是大于1920时，屏幕的显示就基于设计稿了！

那也就意味着，最大的页面元素的宽度是1920px，因此你可以在最大的元素中写上max-width:1920px，如此可以直观地在控制台看到px单位的宽度

<template>
  <div class="container" style="max-width: 1920px">
    <div class="container1"></div>
  </div>
</template>