当企业官网需要同时满足多端精准适配与SEO友好时，传统开发模式正面临双重挑战：单页面应用（SPA）因CSR渲染导致搜索引擎收录困难，而纯原生开发又陷入样式代码臃肿的泥潭。经过多种技术方案对比，我们最终选择UnoCSS原子化引擎与rem动态布局的组合——既能通过极简的CSS产出实现完美自适应，又能无缝对接SSR框架解决SEO痛点。本文将分享这一技术决策的完整实践路径。
1.引入unocss相关js和css
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./js/tool/uno.js"></script>
<!--jquery -->
<script src="./js/tool/jq.js"></script>
<link rel="stylesheet" href="./css/index.css" />
</head>
2.视口适配
function initViewportAdaptation() {
const doc = document;
const win = window;
const docEl = doc.documentElement;
const resizeEvt = "orientationchange" in window ? "orientationchange" : "resize";
const recalc = function () {
let clientWidth = docEl.clientWidth;
if (!clientWidth) return;
let baseSize;
// 根据自己的项目来定，我们1080以下都是手机端
if (clientWidth < 1080) { // 手机端
baseSize = 100 * (clientWidth / 375);
} else {
baseSize = 100 * (clientWidth / 1920);
}
baseSize = Math.max(12, Math.min(baseSize, 100));
docEl.style.fontSize = baseSize + "px";
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener("DOMContentLoaded", recalc, false);
}
3.在你的编辑器安装unocss,这样在写类是会提示
截屏2025-05-23 11.44.50.png
4.使用
使用很简单，就是将display: flex;写为 flex, sm:px-2.4rem是在ipad端padding左右240px,以此类推，详情的可以看看 [https://tailwind.nodejs.cn/docs/installation],里面有对应的类名，真正的实现不写一行样式。但是我们用了rem,需要把px换成rem,才能实现真正的自适应
<!-- sm => ipad的样式 , md => pc的样式 , 不写是手机端样式 -->
<div class="bg-[rgba(255,255,255,0.8)] backdrop-blur-[0.1rem] sm:px-2.4rem sm:h-full px-0.2rem py-0.08rem flex justify-between items-center">
<div class="flex items-center">
</div>
</div>
