⭐
🍌
☁️
✨
‹
返回课程
响应式设计
编程代码 · HTML/CSS
🔊
🔕
⌨️
💡 CSS 媒体查询：屏幕宽度小于 768px 时切换为移动端布局
@
m
e
d
i
a
(
m
a
x
-
w
i
d
t
h
:
7
6
8
p
x
)
{
↵
// @media 媒体查询：当屏幕宽度 ≤ 768px 时生效
.
c
o
n
t
a
i
n
e
r
{
↵
// 选择容器元素
f
l
e
x
-
d
i
r
e
c
t
i
o
n
:
c
o
l
u
m
n
;
↵
// 改为垂直排列（手机上纵向显示）
p
a
d
d
i
n
g
:
1
2
p
x
;
↵
// 缩小内边距
}
↵
// 容器样式结束
.
s
i
d
e
b
a
r
{
↵
// 选择侧边栏
d
i
s
p
l
a
y
:
n
o
n
e
;
↵
// 隐藏侧边栏（手机上不显示）
}
↵
// 侧边栏样式结束
}
// 媒体查询结束
0 字/分
0% 准确
🐵
@
ESC
暂停
⌫
退格