🍋 CSS Tools

Generator Media Query

Generate responsive CSS media queries with device presets

Free Hanya di browser No sign-up

Input

chars words sentences lines

Input Kedua

Hasil

Tentang Generator Media Query

Buat media query CSS responsif untuk breakpoint kustom. Hasilkan query mobile-first atau desktop-first untuk lebar, tinggi, orientasi, dan resolusi.

Cara Kerja

Buat aturan @media dengan properti yang dapat dikonfigurasi. Mendukung query lebar/tinggi (min/max), orientasi (potret/lanskap), resolusi (retina), dan preferensi (skema warna, gerakan berkurang). Output sintaks modern (@media (width >= 768px)) atau tradisional.

Langkah demi Langkah

1 [
2 '
3 C
4 h
5 o
6 o
7 s
8 e
9
10 a
11
12 p
13 r
14 e
15 s
16 e
17 t
18 :
19
20 m
21 o
22 b
23 i
24 l
25 e
26 -
27 f
28 i
29 r
30 s
31 t
32 ,
33
34 d
35 e
36 s
37 k
38 t
39 o
40 p
41 -
42 f
43 i
44 r
45 s
46 t
47 ,
48
49 d
50 e
51 v
52 i
53 c
54 e
55 ,
56
57 o
58 r
59
60 p
61 r
62 i
63 n
64 t
65 '
66 ,
67
68 '
69 F
70 o
71 r
72
73 c
74 u
75 s
76 t
77 o
78 m
79
80 q
81 u
82 e
83 r
84 i
85 e
86 s
87 ,
88
89 s
90 e
91 t
92
93 m
94 i
95 n
96 -
97 w
98 i
99 d
100 t
101 h
102 ,
103
104 m
105 a
106 x
107 -
108 w
109 i
110 d
111 t
112 h
113 ,
114
115 a
116 n
117 d
118
119 o
120 r
121 i
122 e
123 n
124 t
125 a
126 t
127 i
128 o
129 n
130 '
131 ,
132
133 '
134 R
135 e
136 v
137 i
138 e
139 w
140
141 t
142 h
143 e
144
145 g
146 e
147 n
148 e
149 r
150 a
151 t
152 e
153 d
154
155 @
156 m
157 e
158 d
159 i
160 a
161
162 r
163 u
164 l
165 e
166 s
167
168 w
169 i
170 t
171 h
172
173 p
174 l
175 a
176 c
177 e
178 h
179 o
180 l
181 d
182 e
183 r
184
185 c
186 o
187 n
188 t
189 e
190 n
191 t
192 '
193 ,
194
195 '
196 C
197 o
198 p
199 y
200
201 t
202 h
203 e
204
205 C
206 S
207 S
208
209 i
210 n
211 t
212 o
213
214 y
215 o
216 u
217 r
218
219 s
220 t
221 y
222 l
223 e
224 s
225 h
226 e
227 e
228 t
229 '
230 ]

Tips

[
'
M
o
b
i
l
e
-
f
i
r
s
t
(
m
i
n
-
w
i
d
t
h
)
i
s
t
h
e
m
o
d
e
r
n
b
e
s
t
p
r
a
c
t
i
c
e
f
o
r
r
e
s
p
o
n
s
i
v
e
d
e
s
i
g
n
'
,
'
T
a
i
l
w
i
n
d
C
S
S
u
s
e
s
m
o
b
i
l
e
-
f
i
r
s
t
b
r
e
a
k
p
o
i
n
t
s
a
t
6
4
0
,
7
6
8
,
1
0
2
4
,
1
2
8
0
,
1
5
3
6
p
x
'
,
'
T
e
s
t
o
n
r
e
a
l
d
e
v
i
c
e
s
—
d
e
v
i
c
e
p
i
x
e
l
r
a
t
i
o
a
f
f
e
c
t
s
r
e
n
d
e
r
i
n
g
'
,
'
C
o
n
s
i
d
e
r
c
o
n
t
a
i
n
e
r
q
u
e
r
i
e
s
(
@
c
o
n
t
a
i
n
e
r
)
f
o
r
c
o
m
p
o
n
e
n
t
-
l
e
v
e
l
r
e
s
p
o
n
s
i
v
e
n
e
s
s
'
]

Categories