Ratchet页面结构3大铁律固定Bar、.content滚动容器与必配Meta标签详解【免费下载链接】ratchetBuild mobile apps with simple HTML, CSS, and JavaScript components.项目地址: https://gitcode.com/gh_mirrors/ra/ratchet刚上手Ratchet这个用 HTML、CSS、JavaScript 搭建移动端应用的前端框架先别急着写组件——官方文档给出的Page setup 三大铁律决定了你的页面能不能像真正的 App 一样运行。本文用 3 分钟带你吃透 Ratchet 页面结构固定 Bar 放哪、.content滚动容器怎么写、Meta 标签必配哪几个看完即可直接套用官方模板写出规范的移动端页面。Ratchet 页面结构 3 大铁律一览表铁律要求违反后果1️⃣ 固定 Bar 必须第一个所有.bar都放在body最顶部Bar 被内容遮挡、错位2️⃣ 其余内容全部进.content非 Bar 元素统一装进.content容器页面无法独立滚动布局塌陷3️⃣ 别忘了 Meta 标签viewport等标签必须保留手机上缩放、缩放失控work just right 变成跑版铁律一固定 Bar 永远写在 body 最顶部Ratchet 的顶栏、搜索栏等固定 Bar.bar类元素必须始终是body里的第一个内容官方文档对此特意强调This is really important!docs/getting-started.html。为什么因为 Bar 是固定在屏幕顶部的。把它们放在最前面内容从 Bar 下方排开滚动时 Bar 纹丝不动——这就是 App 的感觉而不是网页的感觉。下面这张 Ratchet Android 主题示例图就是标准效果顶部Notes导航 Bar 固定不动下方列表区域独立滚动。一个页面可以有多个 Bar它们都集中写在最前面。以电影查找示例 docs/examples/app-movies/index.html 为例导航 Bar 和搜索 Bar 依次排列之后才是内容区。铁律二.content 滚动容器包裹其余全部内容除 Bar 之外的所有内容都要装进 class 为.content的 div 中并写在所有 Bar 之后docs/getting-started.html。.contentdiv 是 Ratchet 原型中真正发生滚动的元素this is what actually scrolls。也就是说滚动职责不在body上而是由.content接管。iOS 主题下固定顶栏 下方独立滚动的内容区就是这条铁律的典型效果新手常见误区把长列表直接写在body下。结果就是 Bar 跟着页面一起跑整个页面网页感拉满。记住口诀——Bar 固定内容进.content谁也不抢谁的活。铁律三Meta 标签一个都不能少Ratchet 官方模板 docs/template.html 内置了全部必需的 Meta 标签并明确提示make sure they stay in the page——删掉任何一个Ratchet 就无法just right地工作docs/getting-started.html。核心是下面三行meta nameviewport contentinitial-scale1, maximum-scale1 meta nameapple-mobile-web-app-capable contentyes meta nameapple-mobile-web-app-status-bar-style contentblack它们的作用拆开看viewport设定初始缩放比例并禁用用户缩放保证移动端 1:1 排版不走样apple-mobile-web-app-capable应用添加到手机主屏后去掉浏览器地址栏实现chrome-less全屏体验status-bar-style设置 iOS 状态栏样式黑色让固定 Bar 与状态栏无缝衔接直接抄作业基本模板官方模板把三大铁律一次写齐复制 docs/template.html 就能开工关键结构一目了然body !-- 1. Bar 必须最先出现 -- header classbar bar-nav h1 classtitleRatchet/h1 /header !-- 2. 所有非 Bar 内容放进 .content它才是真正滚动的位置 -- div classcontent p classcontent-padded你的内容从这里开始…/p /div /body官方自带的电影查找示例Movie finder完整演示了顶栏 搜索栏 .content 轮播 列表的标准结构成品效果如下图所示常见错误自查清单❌Bar 放在.content里或写在它后面→ Bar 被滚动带跑或遮挡内容❌主内容直接堆在body上→ 页面无法局部滚动Bar 跟随移动❌漏掉viewport等 Meta 标签→ 手机上看成桌面版Ratchet 组件全部跑版自查顺序先看body第一行是不是 Bar再确认所有内容都在.content里最后核对head里的 Meta 标签齐全——三步全过你的 Ratchet 页面结构就合格了 ✅参考文件快速入门与 Page setup 说明docs/getting-started.html官方页面模板含完整 Meta 标签docs/template.html完整示例应用docs/examples/app-movies/index.htmlBar 组件 SASS 源码sass/bars.scss基础样式源码sass/base.scss三大铁律没有复杂概念但它们正是 Ratchet 页面像 App 一样运行的骨架。把骨架搭对剩下的组件拼装才会又快又稳 【免费下载链接】ratchetBuild mobile apps with simple HTML, CSS, and JavaScript components.项目地址: https://gitcode.com/gh_mirrors/ra/ratchet创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考