FrontEndStack

Appearance

移动端适配 ​

移动端适配是指让网页或应用在不同尺寸的移动设备上都能呈现出良好的布局和用户体验。

视口设置 ​

在 HTML 中，可以通过设置 <meta> 标签来控制视口。

html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这表示将视口的宽度设置为设备的宽度，并且初始缩放比例为 1.0。这样可以确保页面在不同设备上以合适的尺寸显示。

响应式布局 ​

  • 弹性布局（Flexbox）：
    • 使用 CSS 的弹性布局可以轻松地实现自适应的布局效果。通过设置容器的 display: flex 属性，可以让容器内的元素自动调整位置和大小，以适应不同的屏幕尺寸。
    • 例如，可以使用 flex-direction 属性来设置主轴方向，justify-content 属性来设置主轴上的对齐方式，align-items 属性来设置交叉轴上的对齐方式。
  • 网格布局（Grid）：
    • CSS 网格布局提供了更强大的布局控制能力。可以通过设置网格容器的 display: grid 属性来创建网格布局。
    • 使用 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行，然后将元素放置在网格中，通过指定元素在网格中的位置来实现布局。

媒体查询 ​

媒体查询允许根据设备的特性（如屏幕宽度、分辨率等）来应用不同的 CSS 样式。

css
@media screen and (max-width: 768px) {
  /* 当屏幕宽度小于等于 768px 时应用的样式 */
  .container {
    width: 100%;
  }
}

图片适配 ​

  1. 响应式图片，使用 <img> 标签的 srcset 和 sizes 属性可以根据不同的屏幕尺寸加载不同分辨率的图片。
html
<img
  src="small.jpg"
  srcset="medium.jpg 1024w, large.jpg 2048w"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" />
  1. 背景图片适配, 使用 CSS 的 background-image 属性可以设置背景图片，并通过 background-size 属性控制背景图片的尺寸和缩放方式，例如，设置 background-size: cover 可以让背景图片覆盖整个容器，同时保持图片的比例不变。

字体适配 ​

  1. 相对单位，使用相对单位如 em、rem 和百分比来设置字体大小，这样可以让字体根据屏幕尺寸自动调整大小。比如屏幕宽度小于等于 768px 时，.text 的字体大小为 14px; 屏幕宽度大于 768px 时，.text 的字体大小为 16px;
css
@media screen and (min-width: 769px) {
  html {
    font-size: 16px;
  }
}

@media screen and (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

.text {
  font-size: 1rem;
}
  1. 使用 viewport 单位，将字体大小设置为视口单位 vw 或 vh 可以根据设备的宽度或高度自动调整字体的大小。

postcss-px-to-viewport ​

postcss-px-to-viewport 是一个 PostCSS 插件，用于将 CSS 中的 px 单位转换为 vw 或 vh 单位。它可以帮助我们实现在不同屏幕尺寸下的自适应布局，以提高页面的响应性和可用性。

原理 ​

  • 遍历 CSS 文件中的所有样式规则，找到其中所有的 px 单位值。
  • 将每个 px 值根据设备屏幕的宽度和高度转换为对应的 vw 或 rem 值。例如，如果设备屏幕的宽度为 750px，样式表中有一个宽度为 100px 的元素，那么插件将把它转换为 13.33vw（100/750*100）的值。
  • 生成转换后的 CSS 文件。

转换 VW 方案 ​

js
'postcss-px-to-viewport': {
    unitToConvert: 'px', // 需要转换的单位，默认为"px"
    viewportWidth: 375, // 视窗的宽度，对应设计稿的宽度
    viewportUnit: 'vw', // 指定需要转
    fontViewportUnit: 'vw', // 字体使用的视口单位
    unitPrecision: 13 // 指定`px`转换为视窗单位值的小数后 x位数
   	...
}

计算 1px 在设计稿中的占比，再换算成 vw，1px = 1 / 375 = 0.2666666666666% 即 100px = 26.6666666666666% = 26.6666666666666vw 实际渲染时（375px 的屏幕），26.6666666666666vw = 26.6666666666% * 375 = 100px

在 转换成 vw 的方案设置媒体查询超出宽度范围后固定 body 宽度，内容居中时，会出现样式过大影响查看的问题。

转换 REM 方案 ​

避免不同浏览器的默认字体大小不一样导致大小不一致的问题，我们需要固定好 root 元素 html 的 font-size 恰好我们可以利用 postcss-px-viewport 不支持内联样式的转换。来设置 root 元素 html 的内联 font-size: 16px;来固定 root 的字体大小以适配转换成 rem 的方案。 1px = 1 / 375 = 0.2666666666666% 即 100px = 26.6666666666666% = 26.6666666666666rem 由于我们设置了 root 元素 html 的内联 font-size: 16px;来固定 root 的字体大小。因此，实际渲染时（375px 的屏幕），容器 26.6666666666666rem = 26.6666666666666 _ 16 = 426.6666666666656px 也就是说，我们需要更改 viewportWidth 的大小来和设计图适配。直接推导一下设计图与 viewportWidth 的倍数关系 = 426.6666666666656 / 100 = 4.26656 倍。设置 viewportWidth: 1599.96 （375 _ 4.26656 = 1599.96）

rem + vw 方案 ​

原则上需要一个参考的设计图，这边假设为 375px 宽设计图。计算方法与 postcss-px-to-viewport rem 方案一至。

计算公式 ：1vw = 3.75px 1px = 0.2666666666666667vw 100px = 26.6666666666666667vw 1rem = 26.6666666666666667vw = 100px

但需要注意的是，设置时需要把 1rem 设置成 100px 对应的 vw 值的值（防止小于浏览器最小字体），编写时根据设计图 px / 100 来编写。

当需要向上兼容自适应的时候，设置好@media 对应不同的 font-size 即可。

小屏设计图向上兼容自适应大屏幕 ​

当需要从移动端设计图适配到平板、PC 屏幕，

  1. （最方便）rem 方案

优点

  • 自动转换 UI 框架中的单位。
  • 配合 media 媒体查询设置 root fontSize 适配不同分辨率的大小以及限制最大宽度。

缺点

  • 所有设置转换的单位都会被转换掉，无法设置某些样式的单位不被转换。
  1. （最灵活）rem + vw 方案

优点

  • 配合 media 媒体查询设置 root fontSize 适配不同分辨率的大小以及限制最大宽度。
  • 高度自定义，谁需要转换谁转换成 rem。

缺点

  • 当需要把 UI 框架中的单位也转换时，会非常的头大。需要一个一个覆盖。
  1. （不适合）vw 方案

该方案在限制最大宽度的时候，由于大小都是更具 viewport 来决定的。所以限制了最大宽度时里面的内容依旧会随 viewport 变大而变大。故不合适。

大屏设计图向下兼容自适应小屏幕 ​

  1. （建议）rem 方案

优点

  • 自动转换 UI 框架中的单位，省事。
  • 设置最小宽度居中，超出部分滚动条。
  • 适配比设计稿更大的屏幕时把 root fontSize 设置为更大即可。

缺点

  • 所有设置转换的单位都会被转换掉，无法设置某些样式的单位不被转换。
  1. （一般） rem + vw 方案

假设屏幕 1024px 计算公式 ：1vw = 10.24px 1px = 0.09765625vw 100px = 9.765625vw 1rem = 9.765625vw = 100px

优点

设置时需要把 1rem 设置成 100px 对应的 vw 值的值（防止小于浏览器最小字体），编写时根据设计图 px / 100 来编写。

缺点

  • 需要写多个媒体查询更改 root fontSize（因为存在字体太大导致一屏内容显示太少问题）。
  • 当需要把 UI 框架中的单位也转换时，会非常的头大。需要一个一个覆盖。
  • 无法设置最小宽度居中内容。
  1. （不适合）vw 方案

由于国产浏览器中的 root fontSize 小于默认最小字体（一般是 12px）时，会强制保持 root fontSize = 12px ，因此该方法并不适合。

只做移动端 ​

postcss-px-to-viewport -- vw 方法，一把梭，什么都不用考虑。且是最真实的按照屏幕大小的比例来放大缩小。