响应适配

早期方案：UI设计宽度为980px

<!--
  layout viewport
  不使用 viewport，使用浏览器默认宽度为 980px
  浏览器pc端两边会留白，移动端会完整展示出来
-->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->

过渡方案：viewport 缩放比

// 动态设置 viewport 缩放比
(function (designWidth) {
  const dEl = document.documentElement
  let meta = document.querySelector('meta[name=viewport]')

  if (!meta) {
    meta = document.createElement('meta')
    meta.setAttribute('name', 'viewport')
    document.head.appendChild(meta)
  }

  function setMetaContent() {
    const deviceWidth = dEl.clientWidth
    const scale = deviceWidth / designWidth
    const content = `width=${deviceWidth}, initial-scale=${scale}`
    meta.setAttribute('content', content)
  }
  setMetaContent()

  window.addEventListener('resize', setMetaContent)
})(750)

过渡方案：flexible + rem

lib-flexible 动态设置根字体postcss-pxtorem px转rem

pnpm add amfe-flexible
pnpm add -D postcss postcss-pxtorem

方案：autofit.js 自适应工具

autofit.js 自适应工具

方案：px转vw

postcss-px-to-viewport px转vwvw 兼容方案

方案：Tailwind CSS ⭐️

Tailwind CSSResponsive Design

方案：UnoCSS ⭐️

UnoCSStheme breakpoints

特殊场景情况

场景一：适配 Retina 屏

<script>
  const dpr = devicePixelRatio >= 3 ? 3 : devicePixelRatio >= 2 ? 2: 1;
  document.documentElement.setAttribute('data-dpr', dpr);
</script>

场景二：适配图片不失真

<!--
  1、css样式尺寸不变的情况下, 当DPR变大 -> 图像尺寸变大

  DPR(window.devicePixelRatio)：设备的分辨率缩放比例 + 浏览器的缩放比例
  物理像素: 例如Mac的内建视网膜显示器 3072 * 1920 => 3072
  设备像素: 例如Mac的内建视网膜显示器 3072 * 1920 => 1920
  css像素：css代码里写的px

  css像素点 === 物理像素点 => 图片最清晰
  公式：图像的尺寸 = css的尺寸 * DPR
-->
<img
  style="width: 150px; height: 150px;"
  srcset="
    logo-150.png,
    logo-300.png 2x,
    logo-600.png 4x,
    logo-900.png 6x
  "
>

<!--
  2、css样式尺寸变化，DPR不变

  当屏幕尺寸800px，找到 sizes 为900px，900px * DPR => 900的物理像素 -> 900w -> logo-900.png
-->
<img
  style="width: 50vw; height: 50vh"
  srcset="
    logo-150.png 150w,
    logo-300.png 300w,
    logo-600.png 600w,
    logo-900.png 900w
  "
  sizes="
    (max-width: 300px) 300px,
    (max-width: 600px) 600px,
    (max-width: 900px) 900px,
    50vw
  "
>

场景三：适配 iPhoneX 安全区域

<!-- 页面内容完全覆盖整个窗口 -->
<meta name="viewport" content="width=device-width, viewport-fit=cover">

主题切换方案

方案一：CSS变量 + 类名切换

// 更改根目录类名
function changeTheme(theme) {
  document.body.className = theme
}

方案二：v-bind

<script setup>
const theme = {
  color: '#eee',
}
</script>

<template>
  <p />
</template>

<style scoped>
  p {
    color: v-bind('theme.color');
  }
</style>

方案三：SCSS变量 + 类名切换

[data-theme=default] {
  --color-primary: #516BD9;
}

方案四：CSS变量 + 动态setProperty

/* 全局中设置好预设的全局CSS变量样式 */
:root {
  --theme-color: #333;
  --theme-background: #eee;
}

方案五：filter

body {
  /* 改变整体色调 */
  filter: hue-rotate(45deg);
  /* 悼念色 */
  /* filter: grayscale(1); */
}

ICON

方案一：Iconfont

IconfontWeb 端使用

方案二：UnoCSS Icons ⭐️

UnoCSS Iconsall available icons

参考

设计工具

Figma摹客Sketch

屏幕尺寸

尺寸直观图尺寸参数大全纸张尺寸转换

设计规范

超人的电话亭UI设计师知识库

设计资源及灵感

cbc.design优设saasporeftoMFSC123.COM