IMFE
桂雅骏
2022-10-24
目录

移动端web设计规范开发手册

# 移动端web设计规范开发手册

# 1 移动端屏幕适配

# 1.1 基础概念

# 1.1.1 物理像素

可以简单理解为屏幕上有多少像素点，比如 iPhone12 Pro 产品参数里 2532 * 1170 像素分辨率。

# 1.1.2 设备独立像素（Device Independent Pixels）

一种物理测量单位，基于计算机控制的坐标系统和抽象像素（虚拟像素），由底层系统的程序使用，转换为物理像素的应用。

典型的用途是允许移动设备软件将信息显示和用户交互扩展到不同的屏幕尺寸。

设备独立像素 = CSS 像素 = 逻辑像素

例如 Chrome 浏览器开发者工具中显示的 iPhone12 Pro 为 390 * 844，这就是设备独立像素。

# 1.1.3 设备像素比（Device Pixel Ratio）

DPR = 物理像素 / 设备独立像素

正如刚刚举例：iPhone12 Pro 的场景下，DPR = （1170 * 2532）/（390 * 844）= 3

详细可见这里 (opens new window)

# 1.2 早期方案

  1. CSS 媒体查询（淘汰）：百分比缺少基准单位，并且不是所有度量属性都支持百分比。

  2. rem 适配方案（淘汰）：虽然满足了基准单位要求，但是会有以下问题：

  • 动态修改 Viewport 存在一定的风险的，譬如通过 Viewport 改变了页面的缩放之后，获取到的 innerWidth/innerHeight 也会随之发生变化，如果业务逻辑有获取此类高宽进行其他计算的，可能会导致意想不到的错误。
  • flexible/hotcss 都并非纯 CSS 方案，需要引入一定的 Javascript 代码。
  • rem 的设计初衷并非是用于解决此类问题，用 rem 进行页面的宽度适配多少有一种 hack 的感觉。
  • 存在一定的兼容性问题，对于安卓 4.4 以下版本系统不支持 viewport 缩放（当然，flexible 处理 Android 系列时，始终认为其 dpr 为 1，没有进行 viewport 缩放）。

# 1.3 当今时代方案 —— vw 适配方案

vw/vh（vmax/vmin）的出现弥补了需要借助 Javascript 动态修改根元素 fontsize。vw等于初始包含块（html元素）宽度的 1%，即

1vw = window.innerWidth（页面可用宽度）的 1%

1vh = window.innerHeight（页面可用高度）的 1%

例如：设计稿为 375 * 667，某图片宽高为 300 * 60，则：

200/375 = 80% = 80vw

60/375 = 16% = 16vw

可以使用 vw 的场景：

  • 容器大小适配
  • 文本大小适配
  • 大于 1px 的边框、圆角、阴影
  • 内外边距

# 1.4 如何使用

安装 postcss-px-to-viewport 插件，可参考文档 (opens new window)

postcss.config.js 中添加如下配置：

// postcss.config.js

// UI 设计稿的标准宽度
const MY_UI_WIDTH = 414
// imfe-mui 设计稿标准宽度
const VANT_UI_WIDTH = 375

module.exports = ({ file }) => {
  const designWidth = file.dirname.includes(
    'node_modules/vant'
  ) ? VANT_UI_WIDTH : MY_UI_WIDTH
  return {
    plugins: {
      autoprefixer: {
         'overrideBrowserslist': [
          'Android >= 4.0',
          'iOS >= 7'
        ]
      },
      "postcss-px-to-viewport" : {
        unitToConvert: 'px',    // 需要转换的单位，默认为"px"
        viewportWidth: designWidth,     // 设计稿的视窗宽度
        unitPrecision: 5,       // 单位转换后保留的精度
        propList: ['*'],        // 能转化为 vw 的属性列表
        viewportUnit: 'vw',     // 希望使用的视窗单位
        fontViewportUnit: 'vw', // 字体使用的视窗单位
        selectorBlackList: [],  // 需要忽略的 CSS 选择器，不会转为视窗单位，使用原有的 px 等单位
        minPixelValue: 1,       // 设置最小的转换数值，如果为 1 的话，只有大于 1 的值会被转换
        mediaQuery: false,      // 媒体查询里的单位是否需要转换单位
        replace: true,          // 是否直接更换属性值，而不添加备用属性
        exclude: /(\/|\\)(node_modules)(\/|\\)/,     // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
        include: /\/src\//,     // 如果设置了include，那将只有匹配到的文件才会被转换
        landscape: false,       // 是否添加根据 landscapeWidth 生成的媒体查询条件
        landscapeUnit: 'vw',    // 横屏时使用的单位
        landscapeWidth: 1125,   // 横屏时使用的视窗宽度
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

# 2 组件库和样式库使用

# 2.1 基础使用

# 2.1.1 快速上手（必须）

提供全量引入和按需引入，详细请见文档 (opens new window)

# 2.1.2 使用规范 less 变量（推荐）

详细请见文档 (opens new window)

# 2.1.3 Tailwindcss 使用（可选）

我们将 Tailwindcss 进行了规范改造，样式添加可以直接使用标准“样式类”。Tailwindcss安装使用可参考文档，在 vue.config.js 中引入 Tailwindcss (opens new window)

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [require('tailwindcss'), require('autoprefixer')]
      }
    }
  }
}
1
2
3
4
5
6
7
8
9
10

在 tailwindcss.config.js 中引入规范包（TODO）：

import tailwindcssConfig from '@imfe/tailwindcssConfig'
module.exports = tailwindcssConfig
1
2

其中提供了标准样式类供大家使用：

// 待添加
1

# 2.2 布局（TODO）

移动端封装了常用布局的 css 库，大家可以放心食用：

col 布局

flex 布局

# 2.3 字体

# 2.3 1 字体类型

字体通常是网页加载最大的资源之一，出于性能上的考虑，选用系统默认字体，提升用户体验。

系统字体优点明显：

  • 和当前操作系统相匹配，达到一致性体验
  • 无需加载过多的资源，提升加载速度
{
  font-family:
    system-ui,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,
    Helvetica,Arial,
    sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol;
}
1
2
3
4
5
6

解说说明：

  1. system-ui：使用各个支持平台上的默认系统字体。

  2. -apple-system：在一些稍低版本 Mac OS X 和 iOS 上，它针对旧版上的 Neue Helvetica 和 Lucida Grande 字体，升级使用更为合适的 San Francisco Fonts。

  3. BlinkMacSystemFont：针对一些 Mac OS X 上的 Chrome 浏览器，使用系统默认字体。

  4. segoe ui：在 Windows 及 Windows Phone 上选取系统默认字体。

  5. Roboto：面向 Android 和一些新版的的 Chrome OS。

  6. Helvetica,Arial：在针对不同操作系统不同平台设定采用默认系统字体后，针对一些低版本浏览器的降级方案。

  7. sans-serif：兜底方案，保证字体风格统一，至少也得是无衬线字体。

上述 5 个字体族定义，优先级由高到底，可以看到，它们 5 个都并非某个特定字体，基本的核心思想都是选择对应平台上的默认系统字体。

涵盖了 iOS、MAC OS X、Android、Windows、Windows Phone 基本所有用户经常使用的主流操作系统。

# 2.3.2 字体大小和行高

字体主要分为字体大小和行高，分别使用不同的尺寸（xs、sm、md、lg）：

@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;
1
2
3
4
5
6
7
8

# 3 色彩

# 3.1 标准色

编号 色值 释义 示例 LESS变量
MR1 #3363FF 智慧卫生主题色 @blue

# 3.2 中性色

编号 色值 释义 示例 LESS变量
C1 #F1F2F5 底层背景色、输入框底色、选项底色、幽灵按钮底色 @gray-1
C2 #F6F7F2 次级背景色 @gray-2
C3 rgba(0, 0, 0, 0.04) 用于卡片内分割线、列表分割线 @gray-3
C4 rgba(0, 0, 0, 0.06) 用于大板块间分割线 @gray-4
C5 rgba(0, 0, 0, 0.24) 用于占位字符色、线性按钮边框 @gray-5
C6 rgba(0, 0, 0, 0.4)) 三级文字色，用于辅助说明文字色等 @gray-6
C7 rgba(0, 0, 0, 0.6) 二级文字色，tab常态文本、列表二级内容 @gray-7
C8 rgba(0, 0, 0, 0.88) 一级文字色，用于标题、正文、输入框文字、列表标签文字色等 @gray-8
B #000000 黑色（仅适用于需强烈对比的展示性文字或标题） @dark
W #FFFFFF 白色 @white

# 功能色

编号 色值 释义 示例 LESS变量
CL #3363FF 文字链颜色 @blue
CG #2BBD2E 成功色 @green
CE #F23F3D 报错色 @red
CSB #FFF3F0 系统通知消息中的文本颜色 @orange-light
CW #F28D23 提醒色 @orange

# 4 边距

边距以 4px 为基础进行扩展，分别适应于不同尺寸（xs、sm、md、lg、xl）：

@padding-base: 4px
@padding-xs: @padding-base * 2
@padding-sm: @padding-base * 3
@padding-md: @padding-base * 4
@padding-lg: @padding-base * 6
@padding-xl: @padding-base * 8
1
2
3
4
5
6

# 图片/图标使用规范（单色，渐变）

# 5.1 图标

# 5.1.1 选择原则

优先选择 svg 矢量图

# 5.1.2 图标命名规范

整体由24个小写字母 + 下划线 + 数字组成

# 5.1.3 图标使用规范

我们统一使用 iconfont 进行图标管理，iconfont 优先如下：

  • 减少请求次数，将多个 icon 合并到一个字体文件中，从而提高网页性能；
  • 可以动态调整图标大小、颜色等等，因为字体是可以通过样式来设置大小和颜色的；
  • 矢量图不失真；
  • 文件加载体积小；
  • 适合多平台（浏览器、iOS App、Android App）

iconfont 字体库地址：待UED建设

使用方法： 1、下载字体文件到 src/assets/iconfont 中，包含 iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2 2、main.js 中引入代码

//main.js
import '@/assets/iconfont/iconfont.css'
1
2

3、使用

<span class="iconfont icon-xxx"></span>
1

# 图片

# 5.2.1 图片格式选择标准

图片格式 优先 缺点 使用场景
GIF 文件小，支持动画、透明、无兼容性问题 只支持256种颜色 色彩简单logo、icon、动图
JPG/JPEG 色彩丰富，文件小 有损压缩，反复保存图片质量下降明显 色彩丰富的图片/渐变图像
PNG 无损压缩，支持透明，简单图片尺寸小 不支持动画，色彩丰富的图片尺寸大 logo/icon/透明图
webP 文件小，支持有损和无损压缩，支持动画、透明 兼容性相对差 支持 webp 格式的 app 和 webview

# 5.2.2 图片大小选择标准

此为适配不同 DPR 屏幕下，选择最为合适的图片尺寸。

# 5.2.3 倍图命名规范

整体命名按照：[图片名]@[倍率]x.[图片类型]

倍图 命名
一倍图 name@1x.png
二倍图 name@2x.png
三倍图 name@3x.png

# 5.2.4 自动化适配 — 使用 img 的 srcset 属性

  • 兼容性：目前仅 IE 不适配，其他适配良好。

  • 应用场景1：图片CSS像素不变的情况

<div class='xxx'>
  <img srcset="photo@1x.png,
                photo@2x.png 1x,
                photo@3x.png 2x">
</div>
1
2
3
4
5
  • 应用场景2：图片CSS像素可变的情况
<div class='xxx'>
  <img srcset="photo@1x.png 300w,
              photo@2x.png 600w,
              photo@3x.png 1200w">
</div>
1
2
3
4
5

解释说明：

  • sizes：根据屏幕宽度设置图片的宽度，屏幕CSS像素大于 600px 则设置图片宽度为 600px，否则为 300px
  • srcset：根据屏幕 DPR 选择使用不同的图片，其中 300w/600w/1200w 表示浏览器宽度的限度，如浏览器宽度为400w，则匹配 600w 的 src。

假如当前屏幕 DPR = 3，屏幕 CSS 宽度为 400 px，则图片 CSS 宽度为 300px，分别使用300w/600w/1200w 除以图片宽度 300px，得到 1/2/4，2 < DPR = 3 < 4，选择 1200w 这张图。

详细可参考：这里 (opens new window)

# 5.2.5 自动化适配 — 使用 CSS 的 image-set()

兼容性：IE不支持、Firefox 2.0-38.0不支持，Chrome > 21.0等

image-set() 可以根据用户设备的分辨率匹配合适的图像-为不同的设备分配合适得图像。

.image {
    width: 200px;
    height: 100px;
    background: url(not.png); // image-set 不支持的情况会进行降级
    background: -webkit-image-set(
        url(xxx@1x.png) 1x,
        url(xxx@2x.png) 2x,
        url(xxx@3x.png) 3x);
    background: image-set(
        url(xxx@1x.png) 1x,
        url(xxx@2x.png) 2x,
        url(xxx@3x.png) 3x);
    background-size: cover;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
编辑 (opens new window)
上次更新: 2022/10/24, 14:17:08
semver语义化版本规范
imfe-mui组件开发手册

← imfe-mui组件开发手册→

最近更新
01
imfe-mui组件开发手册
10-24
02
UI设计规范在智医工作站落地实践
07-08
03
store-driver
07-08
更多文章>
Copyright © 2022-2022 IMFE | MIT License