【笔记】HTML多端适配

发表于 更新于 阅读次数：

前言

HTML多端适配解决方案

移动端适配

viewport

  • 通过<meta>控制视口宽度实现缩放比例

配置<meta>

name：文档级别的元数据

name="viewport" content=""：布局视口设置，多个属性用逗号分隔，只对移动端有效

width=device-width：布局视口宽度设置为当前设备宽度
initial-scale=1.0：设置视口与设备宽度的缩放比例，缺省值为1.0，取值范围为[0.0,10.0]
minimum-scale=1.0：设置视口与设备宽度的最小缩放比例，缺省值为1.0，取值范围为[0.0,10.0]
maximum-scale=1.0：设置视口与设备宽度的最大缩放比例，缺省值为1.0，取值范围为[0.0,10.0]
user-scalable=no：设置禁止用户缩放页面
shrink-to-fit=no：设置禁止Safari强制缩放页面

1
2
3
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
</head>

rem

  • 由于rem会随着font-size的变化而变化，所以只需要通过CSS的@media在不同屏幕下设置不同的font-size，在业务中使用rem作为单位，就可以实现缩放

配置font-size

  • font-size的尺寸通常配置为屏幕宽度的1/10

以屏幕宽度为375px为例，则font-size应当设置为375px * 10% = 37.5px

CSS
1
2
3
4
5
6
7
<style>
  @media screen and (min-width: 375px) {
    html {
      font-size: 37.5px;
    }
  }
</style>
JS
1
<script src="https://raw.githubusercontent.com/amfe/lib-flexible/refs/heads/2.0/index.min.js"></script>

业务代码

以屏幕宽度为375px、宽度为100px的元素为例，width应当设置为100px / (375px * 10%) = 2.6667rem

直接在CSS中手动转换单位
1
2
3
div {
  width: 2.6667rem;
}
通过Less的混入语法转换单位
1
2
3
4
5
6
7
.px2rem(@key, @px) {
  @{key}: (@px / 37.5) * 1rem
}

div {
  .px2rem(width, 100);
}
通过Webpack插件在打包时转换单位
  • 通过postcss-pxtorem插件在打包时自动将源码中的px转换为rem
1
2
3
div {
  width: 100px;
}

vw

  • 由于vw会随着viewport的变化而变化，1vw等于设备宽度的1%，所以只需要在业务中使用rem作为单位，就可以实现缩放

业务代码

以屏幕宽度为375px为例，1vw等于375px / 100 = 3.75px
以屏幕宽度为375px、宽度为100px的元素为例，width应当设置为100px / (375px / 100) = 26.6667vw

直接在CSS中手动转换单位
1
2
3
div {
  width: 26.6667vw;
}
通过Less的混入语法转换单位
1
2
3
4
5
6
7
8
.px2vw(@key, @px) {
  @vwBase: 375px / 100;
  @{key}: (@px / @vwBase) * 1vw;
}

div {
  .px2vw(width, 100);
}
通过Webpack插件在打包时转换单位
1
2
3
div {
  width: 100px;
}

大屏适配

viewport

传送门

rem

  • 由于rem会随着font-size的变化而变化，所以只需要通过CSS的@media在不同屏幕下设置不同的font-size，在业务中使用rem作为单位，就可以实现缩放

配置font-size

  • font-size的尺寸通常配置为屏幕宽度的1/24

以屏幕宽度为1920px为例，则font-size应当设置为1920px / 24 = 80px

CSS
1
2
3
4
5
6
7
<style>
  @media screen and (min-width: 1920px) {
    html {
      font-size: 80px;
    }
  }
</style>
JS

传送门

业务代码

以屏幕宽度为1920px为例，则font-size应当设置为1920px / 24 = 80px
以屏幕宽度为1920px、宽度为100px的元素为例，width应当设置为100px / (1920px / 24) = 1.25rem

直接在CSS中手动转换单位
1
2
3
div {
  width: 1.25rem;
}
通过Less的混入语法转换单位
1
2
3
4
5
6
7
.px2rem(@key, @px) {
  @{key}: (@px / 80) * 1rem
}

div {
  .px2rem(width, 100);
}
通过Webpack插件在打包时转换单位

传送门

vw

  • 由于vw会随着viewport的变化而变化，1vw等于设备宽度的1%，所以只需要在业务中使用rem作为单位，就可以实现缩放

业务代码

以屏幕宽度为1920px为例，1vw等于1920px / 100 = 19.2px
以屏幕宽度为1920px、宽度为100px的元素为例，width应当设置为100px / (1920px / 100) = 5.2083vw

直接在CSS中手动转换单位
1
2
3
div {
  width: 5.2083vw;
}
通过Less的混入语法转换单位
1
2
3
4
5
6
7
8
.px2vw(@key, @px) {
  @vwBase: 1920px / 100;
  @{key}: (@px / @vwBase) * 1vw;
}

div {
  .px2vw(width, 100);
}
通过Webpack插件在打包时转换单位

传送门

scale

  • 通过CSS的图形变换将<body></body>缩放，实现缩放

业务代码

以屏幕宽度为1920px为例

直接在JS中手动缩放
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 设计稿尺寸
const DESIGN_WIDTH = 1920;
const DESIGN_HEIGHT = 1080;

// 当前窗口可视区域尺寸
const currentW = window.innerWidth;
const currentH = window.innerHeight;

// 计算缩放比例（以最小比例为准，保证内容完整显示）
const scaleW = currentW / DESIGN_WIDTH;
const scaleH = currentH / DESIGN_HEIGHT;
const scale = Math.min(scaleW, scaleH);

// 设置容器缩放和居中
document.body.style.transformOrigin = '0 0';
document.body.style.transform = `scale(${scale}) translate(-50%, -50%)`;
document.body.style.position = 'absolute';
document.body.style.left = '50%';
document.body.style.top = '50%';

完成