通过结合CSS的display属性与媒体查询，可实现响应式设计中元素的显隐控制。默认小屏隐藏侧边栏（display: none），大屏显示（display: block）；菜单按钮则相反，实现互斥切换。采用移动优先策略，先定义小屏样式，再用@media(min-width: 768px)调整大屏布局。注意避免使用visibility:hidden（仍占空间），如需动画可用opacity过渡，确保内容在各设备可访问，并测试多断点以保证布局流畅性。
在响应式
网页设计
中，根据设备屏幕尺寸控制元素的显示与隐藏是常见需求。通过结合 CSS 的
display: none
和
display: block
，配合媒体查询（@media），可以灵活地在不同断点下切换元素的可见状态。
基本原理：display 属性控制显隐
display: none
会完全隐藏元素，不占据布局空间；而
display: block
将元素以块级形式显示。利用这两个值的切换，可以在不同屏幕宽度下控制元素是否出现。
常见使用场景包括：
移动端隐藏导航栏，只在桌面端显示
桌面端隐藏某个按钮，在移动端展示
根据不同分辨率切换布局模块的可见性
使用媒体查询实现响应式切换
通过 @media 查询设定屏幕宽度条件，动态改变 display 值。
立即学习
“
前端免费学习笔记（深入）
”；
Refore网页转设计
一款加速产品 UI 设计迭代的工具，可以一键将任意网页和交互导入到 Pixso、MasterGo、即时设计、Figma，实现像素级还原。
下载
示例代码：
这样，.sidebar 在小屏幕上隐藏，大屏幕显示；.menu-btn 则相反，实现“互斥显示”效果。
实用技巧与注意事项
实际开发中，建议采用“移动优先”策略，先写小屏样式，再用媒体查询增强大屏体验。
避免使用 visibility: hidden，它仍占布局空间
display 切换不会触发动画，如需过渡可结合 opacity 与 height
确保关键内容在所有设备都可访问，隐藏不应影响信息获取
测试多个断点，确保切换自然无布局错乱
基本上就这些，合理运用 display 与媒体查询，能高效实现响应式显隐控制。
/* 默认移动优先：小屏下隐藏 */
.sidebar {
display: none;
}
/ 桌面端显示侧边栏 /
@media (min-width: 768px) {
.sidebar {
display: block;
}
}
/ 移动端显示菜单按钮 /
.menu-btn {
display: block;
}
@media (min-width: 768px) {
.menu-btn {
display: none;
}
}