学习用HTML编辑网页实现根据窗口大小自动隐藏侧边栏-html教程-PHP中文网

最稳妥做法是用css媒体查询配合display: none隐藏侧边栏，使其彻底退出布局流；推荐断点用min-width: 48em而非固定像素，需确保html语义结构合理、避免js强制操作dom。

学习用html编辑网页实现根据窗口大小自动隐藏侧边栏

侧边栏在小屏幕上消失，但不是靠 JavaScript 强制删 DOM

直接用 CSS 媒体查询控制 display 或 visibility 是最稳妥的做法。硬用 JS 监听 window.resize 再操作 document.getElementById 删除或添加元素，容易触发重排、错过首次渲染、且 SSR 不友好。

关键不是“隐藏”，而是“不参与布局”——所以优先选 display: none，而不是 visibility: hidden（后者仍占位）。

display: none 在移动端断点下生效，侧边栏彻底退出流式布局，主内容自动撑满
断点值别写死成 768px，改用 min-width: 48em 更可靠（em 基于用户字号，兼容缩放）
如果侧边栏含 position: fixed 或 absolute，得额外加 display: none 到对应选择器，否则媒体查询可能不生效

HTML 结构必须支持语义化响应式切换

不要把侧边栏塞进 <div id="sidebar"> 然后靠 JS 搞“显示/隐藏按钮”。浏览器原生的 <code><nav></nav> + <main></main> 结构，配合 CSS 的 grid-template-areas 或 flex 顺序控制，才能让屏幕阅读器和搜索引擎正确理解布局变化。

示例结构：

  <header>...</header><div class="layout">
    <nav class="sidebar">...</nav><main class="content">...</main>
</div>
  <footer>...</footer>

.layout 设为 display: grid，用 grid-template-columns: 250px 1fr 控制桌面布局
媒体查询里改成 grid-template-columns: 1fr，再配 grid-template-areas: "content"，同时给 .sidebar 加 display: none
避免用 float 或绝对定位做侧边栏——它们无法被媒体查询优雅接管

点击按钮展开隐藏的侧边栏时，别用 `innerHTML` 动态插入 HTML

用户缩放窗口或切到平板横屏时，已展开的侧边栏可能卡在半透明遮罩层后面、焦点丢失、或滚动错位。根本原因是 DOM 节点被销毁重建，事件监听器和表单状态全丢。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

正确做法是：初始 HTML 就包含侧边栏，仅用 CSS 控制显隐 + 过渡动画：

给 .sidebar 加 transform: translateX(-100%) 和 transition: transform 0.3s ease
点击按钮时只切换一个类名，比如 .sidebar.open → transform: translateX(0)
遮罩层用独立 <div class="overlay">，同样靠类名控制 <code>opacity 和 visibility，不依赖 JS 插入
记得加 aria-expanded="false" 和 aria-controls="sidebar-id"，键盘用户 Tab 到按钮时能感知状态

测试时最容易漏掉的三个真实场景

光看 Chrome DevTools 的响应式模式不够。真机上常出问题的点很具体：

iOS Safari 下，vh 单位在地址栏收起/展开时会跳变，侧边栏高度若依赖 100vh，可能突然截断——改用 100dvh（如果支持）或 min-height: 100% 配合 html, body { height: 100% }
安卓微信内置浏览器对 transform + will-change 组合有渲染 bug，侧边栏滑入时闪白——去掉 will-change: transform，或只在 :hover 或 .open 时加
用户强制放大文字（系统设置 > 显示 > 字体大小拉到最大），em 断点可能失效——补一条 @media (max-device-width: 480px) 保底