持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

背景

在上个月负责一个 H5 营销落地页的开发，在此之前没有做过移动端 H5 的项目，对其中的涉及的技术问题和难点也是毫无准备。这篇文章作为复盘，将一一列举开发过程中遇到的问题和思考，希望能够加深对 H5 开发的认识。

目标

系列文章主要围绕几个技术问题，将包括：移动端适配方案，CSS 与动画，性能优化及开发经验等三个方面
希望通过这个系列，能清晰的描述整个开发过程中需要面对的技术问题及解决方案，同时帮助新手快速入门

行动

what 什么是适配

移动端设备有成百上千的机型、不同的分辨率，为了利用同一套代码，在不同设备上，拥有统一的排版布局，不因机型的差异而造成用户不同的视觉差异。

通常我们会拿到一份 UI 设计稿，所以我们需要根据设备的 ViewPort 将设计稿进行缩放，以达到屏幕适配目的。

pika-2022-06-04T04_49_11.272Z.png

移动端适配应该是响应式网页设计的一部分，我这里主要讲 ViewPort + rem 的方案。

rem 值是为了回避复合问题而发明的。 rem 值相对于根 html 元素，而不是父元素。换句话说，它允许我们以相对方式指定字体大小，而不受父级大小的影响。

ViewPort 是指设备的可视区域，不同的设备 ViewPort 也不相同。

how 如何实现

以 750px 设计稿为例，html 根元素的 font-size 设置为 10vw，即 1rem = 10vw；

rem 函数则根据设计稿中元素尺寸，将 px 转换为 rem 单位。

// global.scss

// 750 是设计稿尺寸
$vw_design: 750;
// 定为 75px 只是方便运算：640px~64px、750px~75px、1080px~108px，依此类推
$vw_fontsize: 75;

// rem 单位换算函数
@function rem($px) {
  @return ($px / $vw_fontsize) * 1rem; // 
}

html {
	// 根元素字体使用 vw 单位
	// rem 和 Viewport 的关系，1rem = 10 vw = 0.1 Viewport
  font-size: ($vw_fontsize / $vw_design) * 100vw;

  // 同时，通过Media Queries 限制根元素最大最小值
   @media screen and (max-width: 320px) {
    font-size: 64px;
  }

  @media screen and (min-width: 540px) {
    font-size: 108px;
  }
}

// body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小
body {
  max-width: 540px;
  min-width: 320px;
}

@import './global.scss';

.card {
  border-radius: rem(16);
  font-size: rem(32);
  overflow: hidden;
}

注意：1rem 等于 html font-size 的大小，所以 rem 函数等价于：

($px / $vw_fontsize) * ($vw_fontsize / $vw_design) * 100vw

// 等价于
($px / $vw_design) * 100vw

常见问题

1px 线条，可以通过 media query 和 transform scale 实现

.mod_grid {
  position: relative;

  &::after {
    // 实现 1物理像素 的下边框线 content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: #ddd;
    height: 1px;
    left: 0;
    right: 0;
    top: 0;

    @media only screen and (-webkit-min- device-pixel-ratio: 2) {
      -webkit-transform: scaleY(0.5);
      -webkit-transform-origin: 50% 0%;
    }
  }
}

rem 转换不准确，导致抖动

移动端 H5 开发入门

背景

目标

行动

what 什么是适配

how 如何实现

常见问题

参考链接