尧图网站建设 
简介这是一份面向前端初学者与网页设计爱好者的黑色主题响应式全屏滚动主页HTML源码可直接用于个人作品集、产品展示或企业官网首页的快速搭建。资源包共37个文件约2.72MB包含2个html页面、3个css样式表、6个js脚本以及jpg、png图片素材、eot/woff/ttf/woff2字体文件和mp4视频等结构完整覆盖页面骨架、黑色配色方案、响应式断点与滚动交互逻辑。源码通过媒体查询适配桌面、平板与手机等不同视口并借助JavaScript实现平滑的全屏分段滚动效果黑色主题在保证对比度与可读性的同时营造出专业、现代的视觉氛围。目前已有188人学习下载适合希望理解响应式布局、全屏滚动实现方式并快速二次定制颜色、内容与模块顺序的开发者参考借鉴。1. 黑色响应式全屏滚动主页一个 HTML 源码能解决什么如果你正在找一个能直接改文字、换图片就能上线的黑色系主页又不想被框架和构建工具绑住那这份「在线黑色响应式全屏滚动主页 html 源码」大概率就是你要的东西。它的核心形态很朴素一个index.html加一份 CSS、一份 JS用fullpage式的整屏滚动把首页切成若干屏每屏占满视口高度滚动时整屏切换配合黑色背景、大字号标题和淡入动画做出那种「一屏一个卖点」的视觉节奏。它解决的是中小团队、个人作品集、产品落地页最现实的问题——没有设计师、没有前端工程化环境也要在半天内拿出一个看起来不廉价的主页。适合谁适合只会 html 网页制作基础语法、想靠 html➕css➕js 基础语法把页面撑起来的人也适合熟手拿它当骨架替换掉滚动逻辑和动画库。下面我按「结构怎么搭、滚动怎么写、响应式怎么调、坑在哪」一路讲透。2. 黑色全屏滚动的骨架从 doctype 到每一屏的容器2.1 为什么黑色主题对结构更宽容也更苛刻黑色背景在视觉上有个特点它会把元素的边界藏起来。浅色页面上卡片、分割线、阴影帮你把内容分区黑色页面上这些几乎看不见用户感知页面结构靠的是「一屏一屏的切换」和「文字出现的时机」。所以黑色全屏滚动主页的结构设计重点不在画框而在控制每一屏里元素的进入顺序。常见做法是每屏只放一个核心信息——一句主标题、一个按钮、一张产品图其余留白。留白在黑色上不是浪费是节奏。从代码角度看黑色主题对结构的要求反而更低你不需要复杂的栅格只需要保证每屏height: 100vh、内容垂直居中、层级用z-index管好。真正苛刻的地方在对比度正文文字如果直接用#333放在#000上几乎读不清这是新手最容易翻车的一处后面避坑章节会细说。2.2 最小可运行的 HTML 骨架先给一份能直接跑起来的结构。它不依赖任何构建工具双击就能在浏览器打开符合「源码建站」最省事的路径。!DOCTYPE html html langzh-cn head meta charsetutf-8 !-- 移动端必须否则全屏高度在手机上会被地址栏顶掉 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 title黑色全屏滚动主页/title link relstylesheet hrefstyle.css /head body !-- 滚动容器每一屏是一个 section -- div idapp section classscreen>/* 全局重置黑色主题下默认边距会露出白边 */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; background: #0a0a0a; /* 不用纯黑留一点层次 */ color: #f5f5f5; /* 正文用近白别用纯白刺眼 */ font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; overflow: hidden; /* 关键交给 JS 控制滚动禁用原生滚动条 */ } #app { height: 100vh; transition: transform 0.8s cubic-bezier(0.77, 0, 0.18, 1); will-change: transform; /* 提前告诉浏览器这层会动减少卡顿 */ } .screen { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 8vw; /* 用 vw 而不是固定 px窄屏不挤 */ text-align: center; } .title { font-size: clamp(28px, 6vw, 72px); letter-spacing: 2px; } .subtitle { margin-top: 20px; font-size: clamp(14px, 2vw, 20px); color: #9a9a9a; }这里几个参数值得说清楚。overflow: hidden放在body上是为了让整屏切换由 JS 的transform驱动而不是浏览器原生滚动——原生滚动做不出「整屏吸附」的手感。transition的cubic-bezier(0.77, 0, 0.18, 1)是一条先快后慢的缓动曲线比默认的ease更有「甩过去」的质感这是很多模板默认值不会告诉你的。clamp()是响应式的关键它让字号在最小值和最大值之间随视口线性变化一行顶掉三行媒体查询。padding用8vw而不是40px是因为在 320px 宽的手机上固定 40px 会吃掉四分之一宽度。3. 全屏滚动的 JS 逻辑滚轮、触摸与键盘三套输入3.1 用 transform 位移代替 scrollTop 的理由全屏滚动有两种实现路线一种是监听scroll事件用scrollTop判断当前屏另一种是禁用原生滚动用transform: translateY()手动位移。我一般选后者原因有三个。第一scrollTop方案在移动端和桌面端的滚动事件触发频率差异很大节流参数很难调第二transform走的是合成层不触发重排动画更稳第三整屏吸附需要「一次滚动只切一屏」scrollTop方案要额外做锁定反而更绕。代价是你要自己处理滚轮、触摸、键盘三套输入这就是下面代码要干的事。3.2 一份能直接用的滚动控制器(function () { const app document.getElementById(app); const screens document.querySelectorAll(.screen); const total screens.length; let current 0; let animating false; // 动画锁防止一次滚动切多屏 function goTo(index) { if (index 0 || index total || animating) return; animating true; current index; app.style.transform translateY(-${current * 100}vh); // 动画时长要和 CSS transition 对齐这里 800ms setTimeout(() { animating false; }, 800); } // 桌面端滚轮 window.addEventListener(wheel, (e) { if (animating) return; goTo(e.deltaY 0 ? current 1 : current - 1); }, { passive: true }); // 移动端触摸用起点终点差值判断方向 let startY 0; window.addEventListener(touchstart, (e) { startY e.touches[0].clientY; }, { passive: true }); window.addEventListener(touchend, (e) { const delta startY - e.changedTouches[0].clientY; if (Math.abs(delta) 50) return; // 小于 50px 视为误触 goTo(delta 0 ? current 1 : current - 1); }, { passive: true }); // 键盘上下键和 PageUp/PageDown window.addEventListener(keydown, (e) { if ([ArrowDown, PageDown].includes(e.key)) goTo(current 1); if ([ArrowUp, PageUp].includes(e.key)) goTo(current - 1); }); })();逻辑说明animating这个锁是整个控制器的核心。没有它用户快速滚动两下current会连加两次页面直接跳过一屏这是最常见的翻车点。goTo里用translateY(-current * 100vh)因为每屏正好 100vh位移量就是屏序号乘以视口高度。setTimeout的 800ms 必须和 CSS 里transition的时长一致改了一个忘了另一个锁会提前或延后释放手感就散了。参数说明触摸判断的50是阈值太小会把手指轻微抖动当成翻页太大则要划很久才响应手机上一般 40 到 60 之间。passive: true是性能优化告诉浏览器这个监听器不会调用preventDefault滚动更顺。键盘那段的includes判断把PageDown和ArrowDown归为一类符合用户直觉。3.3 导航圆点和当前屏高亮全屏滚动如果没有位置指示用户不知道自己在第几屏。加一排圆点是最省事的方案顺便解决「一键返回顶部」的诉求——点第一个圆点就是回顶。// 在 goTo 里追加高亮逻辑 const dots document.querySelectorAll(.dot); function updateDots() { dots.forEach((d, i) d.classList.toggle(active, i current)); } // goTo 内部调用 updateDots().dots { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 10; } .dot { width: 10px; height: 10px; border-radius: 50%; background: #444; margin: 10px 0; cursor: pointer; transition: background 0.3s; } .dot.active { background: #fff; }圆点用position: fixed固定在右侧不随屏滚动。active类切换背景色比改尺寸更不容易引起布局抖动。这套组合在黑色背景上辨识度很高因为灰白对比天然清晰。4. 响应式适配从 320px 手机到 4K 屏的四个断点4.1 全屏滚动在移动端最容易翻车的两处第一处是100vh。移动浏览器的地址栏会动态收起100vh在地址栏显示时比实际可视区高导致每屏底部被裁掉一截。稳妥做法是用100dvh动态视口高度不支持的浏览器回退到100vh。.screen { height: 100vh; height: 100dvh; /* 支持的浏览器会用这行覆盖上一行 */ }第二处是触摸和页面原生滚动的冲突。如果body的overflow: hidden没生效或者某个子元素设了overflow: auto手指滑动会先触发子元素滚动全屏切换就失灵了。排查时先确认body和html都禁了滚动。4.2 四个断点的参数表响应式不是断点越多越好全屏滚动主页四个断点足够覆盖主流设备。下面这张表是我实际项目里调过的值可以直接抄。断点触发宽度标题字号屏内边距圆点位置手机≤ 480pxclamp 下限 28px0 6vwright 12px平板481–768pxclamp 中段0 8vwright 20px笔记本769–1440pxclamp 上限 72px0 10vwright 24px大屏≥ 1441px固定 80px0 12vwright 40pxmedia (max-width: 480px) { .screen { padding: 0 6vw; } .dots { right: 12px; } .dot { width: 8px; height: 8px; } } media (min-width: 1441px) { .title { font-size: 80px; } .screen { padding: 0 12vw; } .dots { right: 40px; } }参数说明手机端圆点缩小到 8px是因为小屏上 10px 的圆点加间距会显得笨重。大屏端标题固定 80px 而不是继续用clamp是因为超过 1440px 后视口宽度增长变慢clamp的线性增长几乎停滞不如直接给个定值。padding用vw在大屏上会变得很大所以大屏单独调。4.3 图片和背景的响应式处理黑色主页常用大图做背景图片处理不好要么糊要么加载慢。常见做法是用background-size: cover配合background-position: center再给一个纯色兜底。.screen.with-bg { background: #0a0a0a url(bg.jpg) center/cover no-repeat; }cover保证图片铺满不留白center保证裁切时主体居中。兜底的#0a0a0a写在url前面图片没加载出来时不会闪白。如果图片很大建议压到 200KB 以内或者用image-set()给不同分辨率设备提供不同尺寸但那是进阶优化新手先把cover用对就够了。5. 避坑与排查黑色全屏主页最常见的五个问题5.1 中文乱码标题变成问号现象页面打开后中文全是乱码或问号。原因meta charsetutf-8缺失或者文件本身保存成了 GBK 编码。解决确认 HTML 头部有charset声明同时用编辑器把文件另存为 UTF-8。这两个条件缺一不可只改一个没用。5.2 手机上滚不动或者滚一下跳两屏现象桌面正常手机上一划就跳过一屏或者完全没反应。原因触摸阈值设得太小或者animating锁的时长和 CSS 过渡时长不一致。解决把触摸判断的阈值调到 50 以上核对setTimeout的毫秒数和transition的秒数是否一致。另外确认touchstart和touchend都加了passive: true否则某些浏览器会拦截。5.3 最后一屏底部被裁掉现象滚到最后一屏底部内容显示不全。原因100vh在移动端把地址栏高度算进去了。解决改用100dvh并保留100vh作为回退。如果还不行检查是不是有元素设了margin-bottom把内容顶出去了。5.4 滚动时页面闪烁或卡顿现象切换屏时画面撕裂、闪一下。原因transform没有触发合成层或者背景图太大导致重绘。解决给#app加will-change: transform给每屏的背景图加backface-visibility: hidden。如果还卡把大背景图换成纯色加渐变视觉上差别不大性能提升明显。5.5 圆点点击没反应现象导航圆点点了不跳转。原因圆点的点击事件没绑定或者z-index被内容盖住了。解决给圆点容器加z-index: 10并在 JS 里给每个圆点绑定click调用goTo(i)。注意goTo里有animating锁动画中点击会被忽略这是预期行为不是 bug。6. 进阶技巧把这份源码改成能长期维护的样子6.1 用 CSS 变量统一黑色主题的色板黑色主题最怕的是「黑得不一样」。今天改一个#0a0a0a明天加一个#111页面就花了。用 CSS 变量把色板收口改一处全站生效。:root { --bg-base: #0a0a0a; /* 页面底色 */ --bg-elevated: #161616; /* 卡片、浮层 */ --text-primary: #f5f5f5; /* 主文字 */ --text-secondary: #9a9a9a; /* 次要文字 */ --accent: #4d9fff; /* 强调色按钮和链接 */ } body { background: var(--bg-base); color: var(--text-primary); } .subtitle { color: var(--text-secondary); } .btn { background: var(--accent); }这套变量只有五个但覆盖了黑色主页 90% 的用色场景。--bg-elevated比底色亮一点点用来做卡片在黑色上能看出层次但不突兀。--accent选蓝色是因为它在黑底上对比度高且不刺眼换成红色或绿色容易显得廉价。6.2 用 IntersectionObserver 做进入动画全屏滚动主页的动画最忌讳用setTimeout硬等。正确做法是监听当前屏是否进入视口进入时给元素加类触发 CSS 动画。const observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { entry.target.classList.add(visible); } }); }, { threshold: 0.5 }); // 元素露出 50% 才触发 document.querySelectorAll(.screen).forEach((s) observer.observe(s));.screen .title, .screen .subtitle { opacity: 0; transform: translateY(30px); transition: opacity 0.6s, transform 0.6s; } .screen.visible .title { opacity: 1; transform: translateY(0); } .screen.visible .subtitle { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }threshold: 0.5表示元素露出一半才触发避免刚切屏就闪出来。transition-delay让副标题比主标题晚 0.15 秒出现形成层次。这套写法比在goTo里手动加类更稳因为用户用键盘或圆点跳转时IntersectionObserver一样会触发不用为每种输入单独写逻辑。6.3 验证清单上线前我会逐条过的六项改完源码别急着传服务器按这个清单过一遍能挡掉大部分线上事故。第一手机和桌面各打开一次确认滚动方向、速度、圆点高亮都正常。第二把浏览器窗口从最大拖到最小看标题有没有溢出或换行错乱。第三断网刷新确认背景图没加载时页面不是白屏。第四用手机横屏看一次横屏下100vh会变得很矮内容可能挤在一起。第五检查所有链接和按钮黑色主题下按钮的hover态容易看不见。第六把页面分享到聊天工具里看标题和缩略图是否正常这取决于title和og标签源码里没写og的话补上。我自己的习惯是每次改完这份源码先在手机上滚三遍再用桌面滚三遍最后横屏滚一遍。这个动作重复了太多次已经成了肌肉记忆。黑色全屏滚动主页看着简单真正决定质感的往往是那些不起眼的参数——缓动曲线、触摸阈值、字号下限。把这些调顺了一份朴素的 HTML 源码也能撑起一个像样的门面。希望帮到你。本文还有配套的精品资源点击获取 黑色响应式全屏滚动主页HTML源码：从骨架到避坑的完整指南
简介这是一份面向前端初学者与网页设计爱好者的黑色主题响应式全屏滚动主页HTML源码可直接用于个人作品集、产品展示或企业官网首页的快速搭建。资源包共37个文件约2.72MB包含2个html页面、3个css样式表、6个js脚本以及jpg、png图片素材、eot/woff/ttf/woff2字体文件和mp4视频等结构完整覆盖页面骨架、黑色配色方案、响应式断点与滚动交互逻辑。源码通过媒体查询适配桌面、平板与手机等不同视口并借助JavaScript实现平滑的全屏分段滚动效果黑色主题在保证对比度与可读性的同时营造出专业、现代的视觉氛围。目前已有188人学习下载适合希望理解响应式布局、全屏滚动实现方式并快速二次定制颜色、内容与模块顺序的开发者参考借鉴。1. 黑色响应式全屏滚动主页一个 HTML 源码能解决什么如果你正在找一个能直接改文字、换图片就能上线的黑色系主页又不想被框架和构建工具绑住那这份「在线黑色响应式全屏滚动主页 html 源码」大概率就是你要的东西。它的核心形态很朴素一个index.html加一份 CSS、一份 JS用fullpage式的整屏滚动把首页切成若干屏每屏占满视口高度滚动时整屏切换配合黑色背景、大字号标题和淡入动画做出那种「一屏一个卖点」的视觉节奏。它解决的是中小团队、个人作品集、产品落地页最现实的问题——没有设计师、没有前端工程化环境也要在半天内拿出一个看起来不廉价的主页。适合谁适合只会 html 网页制作基础语法、想靠 html➕css➕js 基础语法把页面撑起来的人也适合熟手拿它当骨架替换掉滚动逻辑和动画库。下面我按「结构怎么搭、滚动怎么写、响应式怎么调、坑在哪」一路讲透。2. 黑色全屏滚动的骨架从 doctype 到每一屏的容器2.1 为什么黑色主题对结构更宽容也更苛刻黑色背景在视觉上有个特点它会把元素的边界藏起来。浅色页面上卡片、分割线、阴影帮你把内容分区黑色页面上这些几乎看不见用户感知页面结构靠的是「一屏一屏的切换」和「文字出现的时机」。所以黑色全屏滚动主页的结构设计重点不在画框而在控制每一屏里元素的进入顺序。常见做法是每屏只放一个核心信息——一句主标题、一个按钮、一张产品图其余留白。留白在黑色上不是浪费是节奏。从代码角度看黑色主题对结构的要求反而更低你不需要复杂的栅格只需要保证每屏height: 100vh、内容垂直居中、层级用z-index管好。真正苛刻的地方在对比度正文文字如果直接用#333放在#000上几乎读不清这是新手最容易翻车的一处后面避坑章节会细说。2.2 最小可运行的 HTML 骨架先给一份能直接跑起来的结构。它不依赖任何构建工具双击就能在浏览器打开符合「源码建站」最省事的路径。!DOCTYPE html html langzh-cn head meta charsetutf-8 !-- 移动端必须否则全屏高度在手机上会被地址栏顶掉 -- meta nameviewport contentwidthdevice-width, initial-scale1.0 title黑色全屏滚动主页/title link relstylesheet hrefstyle.css /head body !-- 滚动容器每一屏是一个 section -- div idapp section classscreen>/* 全局重置黑色主题下默认边距会露出白边 */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; background: #0a0a0a; /* 不用纯黑留一点层次 */ color: #f5f5f5; /* 正文用近白别用纯白刺眼 */ font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; overflow: hidden; /* 关键交给 JS 控制滚动禁用原生滚动条 */ } #app { height: 100vh; transition: transform 0.8s cubic-bezier(0.77, 0, 0.18, 1); will-change: transform; /* 提前告诉浏览器这层会动减少卡顿 */ } .screen { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 8vw; /* 用 vw 而不是固定 px窄屏不挤 */ text-align: center; } .title { font-size: clamp(28px, 6vw, 72px); letter-spacing: 2px; } .subtitle { margin-top: 20px; font-size: clamp(14px, 2vw, 20px); color: #9a9a9a; }这里几个参数值得说清楚。overflow: hidden放在body上是为了让整屏切换由 JS 的transform驱动而不是浏览器原生滚动——原生滚动做不出「整屏吸附」的手感。transition的cubic-bezier(0.77, 0, 0.18, 1)是一条先快后慢的缓动曲线比默认的ease更有「甩过去」的质感这是很多模板默认值不会告诉你的。clamp()是响应式的关键它让字号在最小值和最大值之间随视口线性变化一行顶掉三行媒体查询。padding用8vw而不是40px是因为在 320px 宽的手机上固定 40px 会吃掉四分之一宽度。3. 全屏滚动的 JS 逻辑滚轮、触摸与键盘三套输入3.1 用 transform 位移代替 scrollTop 的理由全屏滚动有两种实现路线一种是监听scroll事件用scrollTop判断当前屏另一种是禁用原生滚动用transform: translateY()手动位移。我一般选后者原因有三个。第一scrollTop方案在移动端和桌面端的滚动事件触发频率差异很大节流参数很难调第二transform走的是合成层不触发重排动画更稳第三整屏吸附需要「一次滚动只切一屏」scrollTop方案要额外做锁定反而更绕。代价是你要自己处理滚轮、触摸、键盘三套输入这就是下面代码要干的事。3.2 一份能直接用的滚动控制器(function () { const app document.getElementById(app); const screens document.querySelectorAll(.screen); const total screens.length; let current 0; let animating false; // 动画锁防止一次滚动切多屏 function goTo(index) { if (index 0 || index total || animating) return; animating true; current index; app.style.transform translateY(-${current * 100}vh); // 动画时长要和 CSS transition 对齐这里 800ms setTimeout(() { animating false; }, 800); } // 桌面端滚轮 window.addEventListener(wheel, (e) { if (animating) return; goTo(e.deltaY 0 ? current 1 : current - 1); }, { passive: true }); // 移动端触摸用起点终点差值判断方向 let startY 0; window.addEventListener(touchstart, (e) { startY e.touches[0].clientY; }, { passive: true }); window.addEventListener(touchend, (e) { const delta startY - e.changedTouches[0].clientY; if (Math.abs(delta) 50) return; // 小于 50px 视为误触 goTo(delta 0 ? current 1 : current - 1); }, { passive: true }); // 键盘上下键和 PageUp/PageDown window.addEventListener(keydown, (e) { if ([ArrowDown, PageDown].includes(e.key)) goTo(current 1); if ([ArrowUp, PageUp].includes(e.key)) goTo(current - 1); }); })();逻辑说明animating这个锁是整个控制器的核心。没有它用户快速滚动两下current会连加两次页面直接跳过一屏这是最常见的翻车点。goTo里用translateY(-current * 100vh)因为每屏正好 100vh位移量就是屏序号乘以视口高度。setTimeout的 800ms 必须和 CSS 里transition的时长一致改了一个忘了另一个锁会提前或延后释放手感就散了。参数说明触摸判断的50是阈值太小会把手指轻微抖动当成翻页太大则要划很久才响应手机上一般 40 到 60 之间。passive: true是性能优化告诉浏览器这个监听器不会调用preventDefault滚动更顺。键盘那段的includes判断把PageDown和ArrowDown归为一类符合用户直觉。3.3 导航圆点和当前屏高亮全屏滚动如果没有位置指示用户不知道自己在第几屏。加一排圆点是最省事的方案顺便解决「一键返回顶部」的诉求——点第一个圆点就是回顶。// 在 goTo 里追加高亮逻辑 const dots document.querySelectorAll(.dot); function updateDots() { dots.forEach((d, i) d.classList.toggle(active, i current)); } // goTo 内部调用 updateDots().dots { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 10; } .dot { width: 10px; height: 10px; border-radius: 50%; background: #444; margin: 10px 0; cursor: pointer; transition: background 0.3s; } .dot.active { background: #fff; }圆点用position: fixed固定在右侧不随屏滚动。active类切换背景色比改尺寸更不容易引起布局抖动。这套组合在黑色背景上辨识度很高因为灰白对比天然清晰。4. 响应式适配从 320px 手机到 4K 屏的四个断点4.1 全屏滚动在移动端最容易翻车的两处第一处是100vh。移动浏览器的地址栏会动态收起100vh在地址栏显示时比实际可视区高导致每屏底部被裁掉一截。稳妥做法是用100dvh动态视口高度不支持的浏览器回退到100vh。.screen { height: 100vh; height: 100dvh; /* 支持的浏览器会用这行覆盖上一行 */ }第二处是触摸和页面原生滚动的冲突。如果body的overflow: hidden没生效或者某个子元素设了overflow: auto手指滑动会先触发子元素滚动全屏切换就失灵了。排查时先确认body和html都禁了滚动。4.2 四个断点的参数表响应式不是断点越多越好全屏滚动主页四个断点足够覆盖主流设备。下面这张表是我实际项目里调过的值可以直接抄。断点触发宽度标题字号屏内边距圆点位置手机≤ 480pxclamp 下限 28px0 6vwright 12px平板481–768pxclamp 中段0 8vwright 20px笔记本769–1440pxclamp 上限 72px0 10vwright 24px大屏≥ 1441px固定 80px0 12vwright 40pxmedia (max-width: 480px) { .screen { padding: 0 6vw; } .dots { right: 12px; } .dot { width: 8px; height: 8px; } } media (min-width: 1441px) { .title { font-size: 80px; } .screen { padding: 0 12vw; } .dots { right: 40px; } }参数说明手机端圆点缩小到 8px是因为小屏上 10px 的圆点加间距会显得笨重。大屏端标题固定 80px 而不是继续用clamp是因为超过 1440px 后视口宽度增长变慢clamp的线性增长几乎停滞不如直接给个定值。padding用vw在大屏上会变得很大所以大屏单独调。4.3 图片和背景的响应式处理黑色主页常用大图做背景图片处理不好要么糊要么加载慢。常见做法是用background-size: cover配合background-position: center再给一个纯色兜底。.screen.with-bg { background: #0a0a0a url(bg.jpg) center/cover no-repeat; }cover保证图片铺满不留白center保证裁切时主体居中。兜底的#0a0a0a写在url前面图片没加载出来时不会闪白。如果图片很大建议压到 200KB 以内或者用image-set()给不同分辨率设备提供不同尺寸但那是进阶优化新手先把cover用对就够了。5. 避坑与排查黑色全屏主页最常见的五个问题5.1 中文乱码标题变成问号现象页面打开后中文全是乱码或问号。原因meta charsetutf-8缺失或者文件本身保存成了 GBK 编码。解决确认 HTML 头部有charset声明同时用编辑器把文件另存为 UTF-8。这两个条件缺一不可只改一个没用。5.2 手机上滚不动或者滚一下跳两屏现象桌面正常手机上一划就跳过一屏或者完全没反应。原因触摸阈值设得太小或者animating锁的时长和 CSS 过渡时长不一致。解决把触摸判断的阈值调到 50 以上核对setTimeout的毫秒数和transition的秒数是否一致。另外确认touchstart和touchend都加了passive: true否则某些浏览器会拦截。5.3 最后一屏底部被裁掉现象滚到最后一屏底部内容显示不全。原因100vh在移动端把地址栏高度算进去了。解决改用100dvh并保留100vh作为回退。如果还不行检查是不是有元素设了margin-bottom把内容顶出去了。5.4 滚动时页面闪烁或卡顿现象切换屏时画面撕裂、闪一下。原因transform没有触发合成层或者背景图太大导致重绘。解决给#app加will-change: transform给每屏的背景图加backface-visibility: hidden。如果还卡把大背景图换成纯色加渐变视觉上差别不大性能提升明显。5.5 圆点点击没反应现象导航圆点点了不跳转。原因圆点的点击事件没绑定或者z-index被内容盖住了。解决给圆点容器加z-index: 10并在 JS 里给每个圆点绑定click调用goTo(i)。注意goTo里有animating锁动画中点击会被忽略这是预期行为不是 bug。6. 进阶技巧把这份源码改成能长期维护的样子6.1 用 CSS 变量统一黑色主题的色板黑色主题最怕的是「黑得不一样」。今天改一个#0a0a0a明天加一个#111页面就花了。用 CSS 变量把色板收口改一处全站生效。:root { --bg-base: #0a0a0a; /* 页面底色 */ --bg-elevated: #161616; /* 卡片、浮层 */ --text-primary: #f5f5f5; /* 主文字 */ --text-secondary: #9a9a9a; /* 次要文字 */ --accent: #4d9fff; /* 强调色按钮和链接 */ } body { background: var(--bg-base); color: var(--text-primary); } .subtitle { color: var(--text-secondary); } .btn { background: var(--accent); }这套变量只有五个但覆盖了黑色主页 90% 的用色场景。--bg-elevated比底色亮一点点用来做卡片在黑色上能看出层次但不突兀。--accent选蓝色是因为它在黑底上对比度高且不刺眼换成红色或绿色容易显得廉价。6.2 用 IntersectionObserver 做进入动画全屏滚动主页的动画最忌讳用setTimeout硬等。正确做法是监听当前屏是否进入视口进入时给元素加类触发 CSS 动画。const observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { entry.target.classList.add(visible); } }); }, { threshold: 0.5 }); // 元素露出 50% 才触发 document.querySelectorAll(.screen).forEach((s) observer.observe(s));.screen .title, .screen .subtitle { opacity: 0; transform: translateY(30px); transition: opacity 0.6s, transform 0.6s; } .screen.visible .title { opacity: 1; transform: translateY(0); } .screen.visible .subtitle { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }threshold: 0.5表示元素露出一半才触发避免刚切屏就闪出来。transition-delay让副标题比主标题晚 0.15 秒出现形成层次。这套写法比在goTo里手动加类更稳因为用户用键盘或圆点跳转时IntersectionObserver一样会触发不用为每种输入单独写逻辑。6.3 验证清单上线前我会逐条过的六项改完源码别急着传服务器按这个清单过一遍能挡掉大部分线上事故。第一手机和桌面各打开一次确认滚动方向、速度、圆点高亮都正常。第二把浏览器窗口从最大拖到最小看标题有没有溢出或换行错乱。第三断网刷新确认背景图没加载时页面不是白屏。第四用手机横屏看一次横屏下100vh会变得很矮内容可能挤在一起。第五检查所有链接和按钮黑色主题下按钮的hover态容易看不见。第六把页面分享到聊天工具里看标题和缩略图是否正常这取决于title和og标签源码里没写og的话补上。我自己的习惯是每次改完这份源码先在手机上滚三遍再用桌面滚三遍最后横屏滚一遍。这个动作重复了太多次已经成了肌肉记忆。黑色全屏滚动主页看着简单真正决定质感的往往是那些不起眼的参数——缓动曲线、触摸阈值、字号下限。把这些调顺了一份朴素的 HTML 源码也能撑起一个像样的门面。希望帮到你。本文还有配套的精品资源点击获取