恭喜过关
-
准确率
加油
-
打字速度
加油
-
闯关时长
加油
-
塑料小白
0星
-
一指青铜
100星
-
二指白银
200星
-
十指黄金
300星
-
流云蓝珀
400星
-
幻影钻石
500星
-
键影星耀
800星
-
神速大师
1000星
-
键舞王者
200CPM
-
星河宗师
400CPM
闯关失败！💔
你打错了太多字，再接再厉吧！
r
e
s
p
o
n
s
i
v
e
d
e
s
i
g
n
rɪˈspɒnsɪv dɪˈzaɪn
响应式设计，使网页适应不同设备的布局方式
m
e
d
i
a
q
u
e
r
y
ˈmiːdiə ˈkwɪəri
媒体查询，根据设备特性应用不同样式的技术
@
m
e
d
i
a
s
c
r
e
e
n
ˌmækrəʊ ɪnˈkluːd
媒体查询的起始标记
m
a
x
-
w
i
d
t
h
mæks wɪdθ
最大宽度条件，小于等于指定宽度时应用样式
m
i
n
-
w
i
d
t
h
mɪn wɪdθ
最小宽度条件，大于等于指定宽度时应用样式
d
e
v
i
c
e
-
w
i
d
t
h
dɪˈvaɪs wɪdθ
设备屏幕宽度条件
d
e
v
i
c
e
-
h
e
i
g
h
t
dɪˈvaɪs haɪt
设备屏幕高度条件
o
r
i
e
n
t
a
t
i
o
n
ˌɔːriənˈteɪʃən
设备方向条件
p
o
r
t
r
a
i
t
ˈpɔːtreɪt
竖屏方向，高度大于宽度
l
a
n
d
s
c
a
p
e
ˈlændskeɪp
横屏方向，宽度大于高度
b
r
e
a
k
p
o
i
n
t
ˈbreɪkˌpɔɪnt
断点，触发样式变化的设备尺寸
m
o
b
i
l
e
f
i
r
s
t
ˈməʊbaɪl fɜːst
移动优先，先设计移动版再扩展到桌面版
f
l
u
i
d
l
a
y
o
u
t
ˈfluːɪd ˈleɪaʊt
流式布局，使用相对单位的布局方式
f
l
e
x
i
b
l
e
g
r
i
d
ˈfleksəbl ɡrɪd
弹性网格，可适应不同屏幕的网格系统
r
e
l
a
t
i
v
e
u
n
i
t
ˈrelətɪv ˈjuːnɪt
相对单位，相对于其他值的长度单位
p
x
piː eks
像素，绝对长度单位
e
m
em
相对长度单位，相对于父元素字体大小
r
e
m
rem
相对长度单位，相对于根元素字体大小
v
w
viː dʌbljuː
视口宽度单位，1vw等于视口宽度的1%
v
h
viː eɪtʃ
视口高度单位，1vh等于视口高度的1%
v
m
i
n
viː mɪn
视口最小值单位，取vw和vh中的较小值
v
m
a
x
viː mæks
视口最大值单位，取vw和vh中的较大值
p
e
r
c
e
n
t
a
g
e
pəˈsentɪdʒ
百分比，相对于父元素的比例单位
v
i
e
w
p
o
r
t
ˈvjuːpɔːt
视口，设备上显示网页的区域
">
<
m
e
t
a
n
a
m
e
=
"
v
i
e
w
p
o
r
t
"
>
ˈmetə neɪm ˈvjuːpɔːt
视口元标签，控制网页在移动设备上的显示
w
i
d
t
h
=
d
e
v
i
c
e
-
w
i
d
t
h
wɪdθ dɪˈvaɪs wɪdθ
设置视口宽度等于设备宽度
i
n
i
t
i
a
l
-
s
c
a
l
e
=
1
.
0
ɪˈnɪʃl skeɪl
设置初始缩放比例为1.0
m
i
n
i
m
u
m
-
s
c
a
l
e
ˈmɪnɪməm skeɪl
设置最小缩放比例
m
a
x
i
m
u
m
-
s
c
a
l
e
ˈmæksɪməm skeɪl
设置最大缩放比例
u
s
e
r
-
s
c
a
l
a
b
l
e
ˈjuːzə ˈskeɪləbl
设置是否允许用户缩放
f
l
u
i
d
i
m
a
g
e
s
ˈfluːɪd ˈɪmɪdʒɪz
流式图片，可随容器缩放的图片
m
a
x
-
w
i
d
t
h
:
1
0
0
%
mæks wɪdθ 100%
设置最大宽度为100%，使图片自适应容器
h
e
i
g
h
t
:
a
u
t
o
haɪt ˈɔːtəʊ
设置高度自动，保持图片比例
f
l
e
x
b
o
x
fleksbɒks
弹性盒布局，适合响应式设计的布局模型
f
l
e
x
-
w
r
a
p
fleks ræp
弹性项目换行属性，适应不同宽度
g
r
i
d
ɡrɪd
网格布局，二维响应式布局系统
g
r
i
d
-
t
e
m
p
l
a
t
e
-
c
o
l
u
m
n
s
ɡrɪd ˈtemplət ˈkɒləmz
定义网格列的属性
a
u
t
o
-
f
i
t
ˈɔːtəʊ fɪt
自动适应网格容器的列数
a
u
t
o
-
f
i
l
l
ˈɔːtəʊ fɪl
自动填充网格容器的列数
m
i
n
m
a
x
(
)
mɪn mæks
定义网格轨道的最小和最大尺寸
r
e
s
p
o
n
s
i
v
e
t
y
p
o
g
r
a
p
h
y
rɪˈspɒnsɪv taɪˈpɒɡrəfi
响应式排版，随屏幕大小变化的文字样式
c
l
a
m
p
(
)
klæmp
CSS函数，设置值在最小和最大值之间
f
o
n
t
-
s
i
z
e
:
c
l
a
m
p
(
)
fɒnt saɪz klæmp
使用clamp()设置响应式字体大小
m
u
l
t
i
-
d
e
v
i
c
e
t
e
s
t
i
n
g
ˌmʌlti dɪˈvaɪs ˈtestɪŋ
多设备测试，在不同设备上验证响应式效果
m
o
b
i
l
e
ˈməʊbaɪl
移动设备，屏幕较小的设备
t
a
b
l
e
t
ˈtæblət
平板设备，屏幕中等的设备
d
e
s
k
t
o
p
ˈdesktɒp
桌面设备，屏幕较大的设备
s
m
a
l
l
s
c
r
e
e
n
smɔːl skriːn
小屏幕，通常指手机设备
m
e
d
i
u
m
s
c
r
e
e
n
ˈmiːdiəm skriːn
中等屏幕，通常指平板设备
l
a
r
g
e
s
c
r
e
e
n
lɑːdʒ skriːn
大屏幕，通常指桌面设备
f
l
e
x
-
d
i
r
e
c
t
i
o
n
fleks daɪˈrekʃən
弹性方向属性，响应式改变排列方向
j
u
s
t
i
f
y
-
c
o
n
t
e
n
t
ˈdʒʌstɪfaɪ kənˈtent
主轴对齐属性，响应式调整对齐方式
a
l
i
g
n
-
i
t
e
m
s
əˈlaɪn ˈaɪtəmz
交叉轴对齐属性，响应式调整对齐方式
d
i
s
p
l
a
y
:
n
o
n
e
dɪˈspleɪ nəʊn
隐藏元素，响应式中用于显示/隐藏内容
v
i
s
i
b
i
l
i
t
y
:
h
i
d
d
e
n
ˌvɪzəˈbɪləti ˈhɪdn
隐藏元素但保留空间，响应式显示控制
鼠标点我 或 按 空格键 开始
