响应式设计

编程代码 · HTML/CSS

💡 CSS 媒体查询：屏幕宽度小于 768px 时切换为移动端布局

@media (max-width: 768px) {↵// @media 媒体查询：当屏幕宽度 ≤ 768px 时生效

.container {↵// 选择容器元素

flex-direction: column;↵// 改为垂直排列（手机上纵向显示）

padding: 12px;↵// 缩小内边距

}↵// 容器样式结束

.sidebar {↵// 选择侧边栏

display: none;↵// 隐藏侧边栏（手机上不显示）

}↵// 侧边栏样式结束

}// 媒体查询结束

0 字/分0% 准确

🐵

ESC 暂停⌫ 退格