响应适配

过渡方案一：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>

场景二：适配图片不失真

<!-- size 浏览器视口为 320px 时图片宽度为 320px，其他情况为 640px -->
<!-- srcset DPR为1 2 3时对应取不同图片 -->
<img src="logo1x.png"
     size="(max-width: 320px) 320w, 640w"
     srcset="logo2x.png 2x, logo3x.png 3x">

场景三：适配 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