纯html+css可实现响应式coming soon页：语义化结构、flex布局、css倒计时；需用rem字体、等宽数字、隐藏字段防bot、相对路径及多格式字体确保兼容性。
用纯HTML+CSS实现轻量级Coming Soon页
不需要框架或JS也能做出响应式、带倒计时的上线预告页，核心是语义化结构 + Flex布局 + CSS动画控制。关键不是“炫”，而是确保手机端文字可读、倒计时准确、背景不遮挡文字。
-
<main></main>包裹主体内容，<footer></footer>放版权信息，避免用<div class="container">这类无意义包裹 <li>背景图用 <code>background-attachment: fixed时务必加background-size: cover，否则在iOS Safari上会拉伸错位 - 字体大小统一用
rem，根元素设font-size: clamp(16px, 4vw, 24px)，兼顾小屏可读与大屏不溢出 - 给每个倒计时单元（天/时/分/秒）套一层
<span class="count"></span>，内部用<span>0</span>单数字结构 - CSS中强制等宽：
.count span { font-family: "Courier New", monospace; width: 1.5em; display: inline-block; text-align: center; } - 闪烁提示用
@keyframes blink { 50% { opacity: 0.3; } }，只加在秒数区域，避免全屏频闪干扰阅读 - 加一个
<input type="text" name="website" style="display:none;">，人类不会填，Bot常自动填充 - 用
performance.now()记录表单渲染到提交的时间，若直接阻止提交（正常人阅读+输入至少需1秒） - 邮箱格式用
type="email"+required，但不要依赖pattern正则——它在某些Android浏览器上不触发验证 - 所有资源路径（图片/CSS/字体）用相对路径，如
./assets/logo.svg，避免/assets/logo.svg导致子路径404 - 自定义字体用
@font-face时，src必须同时提供woff2和woff，Safari 13以下不支持 woff2 - 如果用了
prefers-reduced-motion媒体查询，记得在@media (prefers-reduced-motion: reduce)内把所有animation设为none，否则部分Win10用户会看到卡顿动画
CSS倒计时数字对齐与闪烁提示
纯CSS实现倒计时需要借助 @keyframes 和 content 伪元素，但容易出现数字跳动、宽度抖动。根本原因是默认等宽字体缺失，且::after插入内容未设 display: inline-block。
邮件订阅表单的防垃圾提交处理
简单页面也常被Bot批量提交无效邮箱。不用后端也能做基础防护：隐藏字段 + 时间阈值 + 客户端校验。
部署前必须检查的3个兼容性坑
本地预览正常 ≠ 线上可用。尤其当页面托管在GitHub Pages、Vercel静态托管等环境时，路径和MIME类型容易出错。
