移动端侧边栏应默认隐藏，点击按钮显示，通过flex布局与transform滑入实现自适应；需设box-sizing: border-box、flex-shrink: 0，并配合媒体查询分段控制宽度，避免使用left动画和visibility:hidden。
侧边栏在小屏上消失，点击按钮才显示
移动端屏幕窄，直接堆叠侧边栏和主内容会挤压阅读区域。常见做法是让侧边栏默认
，只在中大屏（如
）下设为
或
。但要注意：别用
替代，它仍占文档流，会影响主内容宽度计算。
实际操作时，建议把侧边栏和主内容包裹在同一个
容器里，并给主内容设置
。这样在侧边栏隐藏时，主内容能自动撑满；显示时又能按比例分配空间。避免用固定像素宽（如
）直接写死侧边栏，否则媒体查询切换时容易错位。
侧边栏从左侧滑入，不遮挡主内容滚动
用
+
实现滑入效果最稳妥。关键点在于：侧边栏的
要高于主内容，但低于顶部导航栏（如果有），否则会盖住返回按钮或标题。
常见错误是直接用
动画，这在高DPI屏或缩放页面时可能偏移不准；
更可靠。另外，滑出后记得给
加
，防止背景内容还能滚动——这点常被忽略，导致手指划动时页面“透底”。
立即学习
“
前端免费学习笔记（深入）
”；
过渡动画统一用
和
，别碰
或
侧边栏内部滚动需单独加
，且高度设为
减去头部高度（如
）
点击遮罩层（
）关闭时，确保事件监听绑定在
上，而非仅侧边栏内，否则点击空白处无效
Flex布局下侧边栏宽度随视口变化自适应
纯百分比（如
）在小屏下依然太宽，需配合媒体查询分段控制。比如：
用于平板，
用于手机横屏，再小就切到隐藏模式。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
盒模型细节决定成败：如果给侧边栏加了
或
，务必设
，否则
会超出预期。另外，
必须显式声明，否则主内容变窄时，侧边栏可能被压缩变形。
示例关键片段：
触摸设备上侧边栏拖拽关闭失效
纯 CSS 无法实现拖拽，必须配合 JS 监听
/
。但 CSS 层面要提前做好准备：侧边栏容器需设
，否则 iOS Safari 会拦截横向滑动手势，直接触发页面回退。
另一个坑是
的滥用。只在动画触发时动态添加该属性（比如 class 切换时），不要一开始就写死在样式里，否则某些安卓 WebView 会出现渲染闪烁或卡顿。
最后提醒：侧边栏若含表单控件（如
、
），在 iOS 上弹出软键盘时，
高度变化会导致侧边栏位置错乱。此时需监听
事件，手动重置
值，而不是依赖 CSS 自动响应。
display: nonemin-width: 768pxdisplay: blockflexvisibility: hiddenflexflex: 1width: 250pxposition: fixedtransform: translateX(-100%)z-indexleft: -250pxtransformbodyoverflow: hiddentransformopacitywidthleftoverflow-y: auto100vhcalc(100vh - 64px)backdropdocumentflex: 0 0 20%max-width: 280pxmax-width: 220pxpaddingborderbox-sizing: border-boxflex-basisflex-shrink: 0.sidebar {
flex: 0 0 240px;
max-width: 240px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.sidebar {
flex: 0 0 220px;
max-width: 220px;
}
}
@media (max-width: 480px) {
.sidebar {
display: none;
}
}touchstarttouchmovetouch-action: pan-xwill-change: transforminputselectviewportresizetransform