「双端 + 响应式」企业官网开发经验分享

前言

近期，我接手了公司内由其他同事先前维护的官网类项目，并负责推进 2025 年新版的改版工作。经过前后约两个月的零散开发，这个企业官网项目已告一段落。在此，我将开发过程中的一些经验整理成文，希望能为大家提供些许参考与帮助。

网站样式-CSS

官网开发往往涉及大量 CSS 样式编写。不少前端开发者在初学阶段或许对页面搭建得心应手，但在实际参与工作后，更多精力投入到业务逻辑开发（搬砖表单、表格），对样式编写逐渐生疏，导致效率可能不高。对此，我的解决办法是借助 AI 快速搭建基础版本，再在此之上进行修改完善。

在样式工具的选择上，Tailwind 确实带来了极大便利。一旦熟练运用，开发效率会显著提升。我观察到，包括 OPPO 在内的许多企业，其官网的也多采用Tailwind实现。庆幸的是，我接手的这个项目同样使用了Tailwind。即便对原子化 CSS 存在个人偏好差异，也不得不承认它在提升开发效率以及适配 AI 辅助开发方面的优势。

而对于我们官网需要支持的 web 和 mobile 双端适配，Tailwind的响应式断点功能能发挥重要作用。

响应式断点

Tailwind 官网（tailwindcss.com/docs/respon...）推荐移动端优先的开发方式，但我个人更习惯先编写 web 端样式。

在开发阶段，通过观察左下角的尺寸指示器，再结合Tailwind的媒体查询，如使用md:xxx来设置大于等于 md 尺寸下的样式，用max-md:xxx定义小于 xl 尺寸时的样式，就能灵活实现双端的响应式适配。

左下角指示器一定要添加上，然后在 app.tsx 文件导入使用。

tsx 复制代码

export function TailwindIndicator() {
  if (process.env.NODE_ENV === 'production') return null;

  return (
    <div className="fixed bottom-1 left-1 z-50 flex size-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
      <div className="block sm:hidden">xs</div>
      <div className="hidden sm:block md:hidden lg:hidden xl:hidden 2xl:hidden">sm</div>
      <div className="hidden md:block lg:hidden xl:hidden 2xl:hidden">md</div>
      <div className="hidden lg:block xl:hidden 2xl:hidden">lg</div>
      <div className="hidden xl:block 2xl:hidden">xl</div>
      <div className="hidden 2xl:block">2xl</div>
    </div>
  );
}

注意: 有一些模块如果 web 和 Mobile 差异较大的话，无法通过媒体查询修改状态可以参考 Swiper分为两个组件，然后通过媒体查询控制显隐。不要通过 js，因为有 ssr，会报警告 dom 不匹配的问题水合报错。

tsx 复制代码

<div className="block lg:hidden">
    <MobileSwiper active={active} setActive={setActive} setSwiperObj={setSwiperObj} />
</div>
<div className="hidden lg:block">
    <WebSwiper active={active} setActive={setActive} setSwiperObj={setSwiperObj} />
</div>

图片素材资源

官网类项目一定有很多宣传用的图片素材，我们前端开发尽量导出压缩后的 .webp 格式的文件上传到公司的对象存储中，然后使用图片地址的方式来使用图片素材，不全添加到代码仓库中，避免打包体积增大。

这里推荐一个好用的 figma plugin，它的作用是可以自定义导出图片格式并压缩，还支持自定义上传到 cos的路径，在我的开发过程中很高频地使用了这个插件。

www.figma.com/community/p...

记得再装上 vscode 的 image preview 插件，方便查看那一长串的 cos 图片地址对应的是哪张图

marketplace.visualstudio.com/items?itemN...

px2vw

虽然 Tailwind 的媒体查询断点很万能，但有时候在两个断点之间尺寸的窗口，有些样式会错位，虽然我们可以自定义更细致的断点，但是我感觉太麻烦了。

这里推荐一个方式是使用根据 vw 而变化的样式，使用 vscode 插件: marketplace.visualstudio.com/items?itemN...

比如设计稿网页端宽度是 1920px，我们在插件也设置对应的宽度.

假如看到设计稿有的模块宽度是 200px，我们就要换成根据 vw 而变化的单位了。

问: 为什么不使用 PostCSS 来批量转换单位？

github.com/evrone/post...

答: 项目中大量使用了 Tailwind CSS，而 Tailwind 的类名本身并不包含 px 单位，因此 postcss-px-to-viewport 无法生效。虽然也有插件支持转换 Tailwind 类名中的数值，但由于我们的组件往往在一个 TSX 文件中同时编写了 Web 和 Mobile 的样式，甚至存在多个视图在同一个 className 字符串中的情况，转换处理会非常复杂且容易出错。因此，未采用该方案。

额外事项说明

1. 建议优先使用相对单位

请尽量使用百分比或分数类名（如 w-[10%] 或 w-1/2）来控制宽度，而不是使用固定数值（如 w-[375px]）。这有助于提升组件在不同屏幕下的响应能力，增强适配性。

2. `className` 合并推荐做法

在使用 Tailwind 的项目中，className 合并是一个高频操作，尤其是当组件需要动态控制样式时。推荐在 utils.ts 文件中添加如下 cn 工具函数：

ts 复制代码

复制编辑
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

clsx：用于将多个类名（字符串、数组、条件表达式等）智能拼接为一个干净的字符串。

twMerge：用于合并 Tailwind 冲突类名（如同时存在 p-2 和 p-4 时，保留最后一个 p-4）。

最终的 cn 函数可以高效处理复杂的动态 class 合并，并避免冗余和冲突，是 Tailwind 项目的最佳实践之一。

结语

以上就是关于双端响应式网站的开发经验分享了，有更好的建议欢迎在评论区留言讨论~