Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,530 --> 00:00:03,240
Welcome back.
2
00:00:03,240 --> 00:00:05,880
So in this lecture we're going to write
3
00:00:05,880 --> 00:00:08,740
our very first media query.
4
00:00:08,740 --> 00:00:10,800
However, before we can do that,
5
00:00:10,800 --> 00:00:14,243
let's learn a little bit how media queries actually work.
6
00:00:15,940 --> 00:00:19,390
And what I'm gonna show you here is how media queries work
7
00:00:19,390 --> 00:00:21,600
with the max-width property,
8
00:00:21,600 --> 00:00:25,700
which is what we use in desktop first strategies.
9
00:00:25,700 --> 00:00:28,940
So that is exactly what we're doing in this case,
10
00:00:28,940 --> 00:00:32,850
but remember that there is also the mobile first strategy,
11
00:00:32,850 --> 00:00:37,640
and so there, we do use media queries with min-width.
12
00:00:37,640 --> 00:00:40,470
But anyway, that's not really important now,
13
00:00:40,470 --> 00:00:42,690
and so let's talk about media queries
14
00:00:42,690 --> 00:00:45,540
with max-width right here.
15
00:00:45,540 --> 00:00:49,320
So let's say that we wanted to apply a certain style
16
00:00:49,320 --> 00:00:53,210
for the range between zero and 600 pixels,
17
00:00:53,210 --> 00:00:56,670
so then we could write a media query like this.
18
00:00:56,670 --> 00:01:01,670
So we will right @media and then max-width 600 pixels.
19
00:01:02,260 --> 00:01:05,040
So basically this media query checks
20
00:01:05,040 --> 00:01:07,130
if the current viewport width
21
00:01:07,130 --> 00:01:11,210
is smaller or equal than 600 pixels,
22
00:01:11,210 --> 00:01:13,933
and if it is then all the CSS code
23
00:01:13,933 --> 00:01:17,550
that is in this media query will apply.
24
00:01:17,550 --> 00:01:21,630
And if not, well, then that code that is in the media query
25
00:01:21,630 --> 00:01:23,270
will not apply.
26
00:01:23,270 --> 00:01:27,560
So what this means is that the max-width is 600,
27
00:01:27,560 --> 00:01:30,760
because 600 is the maximum width
28
00:01:30,760 --> 00:01:33,620
at which the media query still works,
29
00:01:33,620 --> 00:01:35,930
so where it still applies.
30
00:01:35,930 --> 00:01:38,350
Now after a 600 pixels,
31
00:01:38,350 --> 00:01:42,340
for example, at 700 pixels, it stops working,
32
00:01:42,340 --> 00:01:46,050
so the code is no longer gonna be applied then.
33
00:01:46,050 --> 00:01:49,090
All right, now let's try another one
34
00:01:49,090 --> 00:01:50,760
because of course we can create
35
00:01:50,760 --> 00:01:53,330
more than just one media query.
36
00:01:53,330 --> 00:01:55,930
So for example, if we wanted to cover the space
37
00:01:55,930 --> 00:01:58,600
from zero to 1200 pixels,
38
00:01:58,600 --> 00:02:01,970
we would write a media query like this.
39
00:02:01,970 --> 00:02:05,470
So now we have max-width to 1200 pixels,
40
00:02:05,470 --> 00:02:08,790
and so this media query basically asks the question,
41
00:02:08,790 --> 00:02:12,840
is the width less or equal than 1200 pixels?
42
00:02:12,840 --> 00:02:14,950
And so if it, is then of course,
43
00:02:14,950 --> 00:02:19,090
this code that is in this media query will be applied.
44
00:02:19,090 --> 00:02:22,760
All right, now inside these media queries here,
45
00:02:22,760 --> 00:02:27,670
we simply overwrite some specific parts of the global CSS,
46
00:02:27,670 --> 00:02:31,240
so the code that is outside of any media query.
47
00:02:31,240 --> 00:02:33,550
But all the rest of the global code
48
00:02:33,550 --> 00:02:35,760
will of course still apply,
49
00:02:35,760 --> 00:02:40,450
and so you can think of media queries as tools for basically
50
00:02:40,450 --> 00:02:45,450
overriding specific parts of CSS at certain viewport width.
51
00:02:46,730 --> 00:02:51,360
Okay, but anyway, switching back to our two media query
52
00:02:51,360 --> 00:02:55,140
examples here, maybe you are wondering what happens
53
00:02:55,140 --> 00:03:00,140
if for example, a certain phone has a width of 400 pixels.
54
00:03:00,980 --> 00:03:05,460
So which media query will apply now in this situation?
55
00:03:05,460 --> 00:03:08,450
And that is of course an excellent question,
56
00:03:08,450 --> 00:03:11,040
and the answer is indeed simple.
57
00:03:11,040 --> 00:03:15,460
So both queries will apply because both of the conditions
58
00:03:15,460 --> 00:03:18,200
are actually true, right?
59
00:03:18,200 --> 00:03:22,780
So these 400 pixels are less than 600 pixels,
60
00:03:22,780 --> 00:03:26,140
and they're also less than 1200 pixels,
61
00:03:26,140 --> 00:03:30,640
and so the code in both media queries will be applied.
62
00:03:30,640 --> 00:03:33,730
Now, if you have conflicting CSS declarations
63
00:03:33,730 --> 00:03:37,870
in these queries, which is in fact usually the case,
64
00:03:37,870 --> 00:03:40,670
then the one which appears less in the code
65
00:03:40,670 --> 00:03:43,030
is the one that will apply.
66
00:03:43,030 --> 00:03:46,300
But now another example this time with the phone
67
00:03:46,300 --> 00:03:51,300
of 1000 pixels of width, or maybe actually a tablet.
68
00:03:51,360 --> 00:03:55,110
So here only the 1200 pixel media query applies
69
00:03:55,110 --> 00:03:57,860
because only that condition is true.
70
00:03:57,860 --> 00:04:01,970
So a thousand is of course, less than 1200 pixels,
71
00:04:01,970 --> 00:04:04,480
but it is not less than 600,
72
00:04:04,480 --> 00:04:08,080
and therefore only this 1200 pixel media query
73
00:04:08,080 --> 00:04:09,820
does apply here.
74
00:04:09,820 --> 00:04:11,990
So with that, I hope you understand now
75
00:04:11,990 --> 00:04:14,870
how the max-width media queries work,
76
00:04:14,870 --> 00:04:18,733
and so let's now switch to our code and try it out there.
77
00:04:20,440 --> 00:04:23,030
And just like in our previous projects,
78
00:04:23,030 --> 00:04:25,990
I will now create a copy of the code from the previous
79
00:04:25,990 --> 00:04:28,393
section for this section.
80
00:04:30,270 --> 00:04:33,950
So basically I will build on the code of course,
81
00:04:33,950 --> 00:04:37,370
from the previous section to now build the responsive
82
00:04:37,370 --> 00:04:38,693
Omnifood version.
83
00:04:40,690 --> 00:04:42,790
So let's call this one here responsive,
84
00:04:42,790 --> 00:04:46,210
but of course you can simply keep working on the same code
85
00:04:46,210 --> 00:04:48,590
that you had in the previous section.
86
00:04:48,590 --> 00:04:51,940
So for you, there's no need to create a new folder here,
87
00:04:51,940 --> 00:04:55,010
I'm just doing that so that in the end I can share the code
88
00:04:55,010 --> 00:04:57,553
with you nicely separated.
89
00:04:58,910 --> 00:05:03,200
So I can just drag that code here onto this icon,
90
00:05:03,200 --> 00:05:04,533
and then here we go.
91
00:05:06,950 --> 00:05:11,023
All right, so here is our index.htmlL again,
92
00:05:11,870 --> 00:05:16,870
and then let's open this one to the other site
93
00:05:17,020 --> 00:05:19,333
and the same for general.
94
00:05:20,830 --> 00:05:25,830
Okay, also let's go live here just to open a new tab,
95
00:05:30,700 --> 00:05:34,140
and it is still the same here let's just reload,
96
00:05:34,140 --> 00:05:35,143
and there we go.
97
00:05:37,530 --> 00:05:39,020
So it's still the same port,
98
00:05:39,020 --> 00:05:42,450
so I can still use this one here
99
00:05:42,450 --> 00:05:45,713
because it is also on port 5500.
100
00:05:46,550 --> 00:05:49,640
So this port number here needs to be the same one
101
00:05:49,640 --> 00:05:50,593
as down here.
102
00:05:51,730 --> 00:05:54,748
All right, but anyway, let's now write
103
00:05:54,748 --> 00:05:56,933
our first media query here.
104
00:05:57,840 --> 00:05:59,230
And what I'm gonna do here
105
00:05:59,230 --> 00:06:01,763
is to change some background color maybe.
106
00:06:03,070 --> 00:06:06,320
So here at this section Hero.
107
00:06:06,320 --> 00:06:10,997
So at media, and then max-width,
108
00:06:12,730 --> 00:06:15,620
and let's try the ones that we just saw.
109
00:06:15,620 --> 00:06:17,403
So 1200 pixels.
110
00:06:18,340 --> 00:06:21,140
And for now I'm back to using pixels here
111
00:06:21,140 --> 00:06:23,490
but we will change that in a second
112
00:06:23,490 --> 00:06:25,980
or maybe just in the next lecture,
113
00:06:25,980 --> 00:06:29,530
but here let's keep rolling now with pixels.
114
00:06:29,530 --> 00:06:32,200
Now, inside of this media query,
115
00:06:32,200 --> 00:06:35,260
so in between these curly brackets here,
116
00:06:35,260 --> 00:06:37,310
we can simply write CSS rules,
117
00:06:37,310 --> 00:06:40,310
just like we do outside of the query,
118
00:06:40,310 --> 00:06:42,150
so just like here.
119
00:06:42,150 --> 00:06:45,363
So we can simply now select that section Hero again.
120
00:06:47,290 --> 00:06:51,363
So section Hero, and then let's change the background color,
121
00:06:54,820 --> 00:06:59,820
just like this, and let's make it orange red like this,
122
00:07:00,740 --> 00:07:04,453
give it a save, and let's actually try it out.
123
00:07:06,270 --> 00:07:09,258
So let me open up the DevTools here,
124
00:07:09,258 --> 00:07:13,233
then we can see the width right here in the corner.
125
00:07:14,670 --> 00:07:16,670
So can you see the width there?
126
00:07:16,670 --> 00:07:21,400
It's 13 and now we're getting close to our media query,
127
00:07:21,400 --> 00:07:23,600
so let's see if it applies.
128
00:07:23,600 --> 00:07:25,210
So if everything works,
129
00:07:25,210 --> 00:07:30,210
now our Hero should become red and there we go.
130
00:07:30,700 --> 00:07:34,303
So indeed, that worked, beautiful.
131
00:07:35,250 --> 00:07:38,080
Let's just make this here bigger again,
132
00:07:38,080 --> 00:07:39,980
for some reason it's not really small,
133
00:07:41,530 --> 00:07:45,210
it's maybe a bit too much, but yeah,
134
00:07:45,210 --> 00:07:48,970
let's select this one here and you see that indeed
135
00:07:48,970 --> 00:07:50,270
now this code,
136
00:07:50,270 --> 00:07:53,373
so our media query is here and it is now the code
137
00:07:53,373 --> 00:07:55,250
that is being applied.
138
00:07:55,250 --> 00:07:59,240
So this one is now overriding this other background color
139
00:07:59,240 --> 00:08:03,857
that we set by default outside of any media query, right?
140
00:08:05,210 --> 00:08:08,050
Of course, if we make it bigger again,
141
00:08:08,050 --> 00:08:09,713
then that will disappear.
142
00:08:10,920 --> 00:08:14,950
So now that CSS rule here is gone, but if we go back,
143
00:08:14,950 --> 00:08:16,870
then there it is.
144
00:08:16,870 --> 00:08:19,913
Okay, now let's try another one here.
145
00:08:24,170 --> 00:08:28,183
So now let's try the 600 pixel one.
146
00:08:32,520 --> 00:08:35,313
And again, I'm going to work on the section Hero,
147
00:08:36,560 --> 00:08:37,780
and in this case,
148
00:08:37,780 --> 00:08:42,333
let's try to change the color here to white,
149
00:08:44,080 --> 00:08:48,203
or maybe let's add a border, why not?
150
00:08:51,120 --> 00:08:56,120
And a really big one just so we can see this working,
151
00:08:56,420 --> 00:09:00,620
so a blue one, so making this like really, really ugly
152
00:09:00,620 --> 00:09:01,503
on purpose.
153
00:09:03,150 --> 00:09:05,433
Okay, so let's see.
154
00:09:07,030 --> 00:09:10,723
So we're still far away from 600, but as we approach it,
155
00:09:12,830 --> 00:09:16,750
let's see almost there, and there we go,
156
00:09:16,750 --> 00:09:21,703
there is our nice blue border all around this section Hero.
157
00:09:23,120 --> 00:09:25,460
So let's check out our inspector
158
00:09:29,610 --> 00:09:30,560
right here.
159
00:09:30,560 --> 00:09:32,830
And so you see that now both of them
160
00:09:32,830 --> 00:09:34,990
are indeed being applied.
161
00:09:34,990 --> 00:09:38,873
So just like in that example that we saw during the slide.
162
00:09:40,800 --> 00:09:42,930
But now let's try another thing,
163
00:09:42,930 --> 00:09:46,743
which is to add a conflicting CSS declaration.
164
00:09:48,600 --> 00:09:53,510
So let's say that we wanted the background color to be blue
165
00:09:53,510 --> 00:09:56,853
starting at 600 pixels, right?
166
00:09:57,690 --> 00:10:02,570
So let's see, and so, indeed now the blue is being applied
167
00:10:02,570 --> 00:10:06,023
and it is overriding the orange red here from before.
168
00:10:07,210 --> 00:10:09,370
So hopefully you can see that,
169
00:10:09,370 --> 00:10:12,240
so let's make it even bigger.
170
00:10:12,240 --> 00:10:15,270
So these DevTools, they become really, really important
171
00:10:15,270 --> 00:10:18,163
as we start building our responsive version here.
172
00:10:19,630 --> 00:10:21,320
So you see that the background color
173
00:10:21,320 --> 00:10:23,770
now has been defined three times.
174
00:10:23,770 --> 00:10:27,810
So first it has been overwritten by this one here,
175
00:10:27,810 --> 00:10:29,540
at 1200 pixels,
176
00:10:29,540 --> 00:10:33,770
but now 600 pixels since it appears later in the code
177
00:10:33,770 --> 00:10:35,963
is now the one that is being applied.
178
00:10:37,780 --> 00:10:41,200
So of course before the 600,
179
00:10:41,200 --> 00:10:45,200
it will become orange because now that other media query
180
00:10:45,200 --> 00:10:47,510
is not yet being applied.
181
00:10:47,510 --> 00:10:48,690
So in this situation,
182
00:10:48,690 --> 00:10:52,700
only the 1200 pixel query is being applied,
183
00:10:52,700 --> 00:10:56,840
but then of course at 600 both of them are being applied.
184
00:10:56,840 --> 00:10:59,680
And so then when there is conflicts like here,
185
00:10:59,680 --> 00:11:01,683
then the last one is being applied.
186
00:11:02,640 --> 00:11:05,540
And let me actually prove that to you
187
00:11:05,540 --> 00:11:09,603
because if we move this one here back,
188
00:11:10,650 --> 00:11:12,743
so if we switch them basically,
189
00:11:13,940 --> 00:11:17,170
then, well here you immediately see it,
190
00:11:17,170 --> 00:11:20,630
that it is now still the orange one who is being applied
191
00:11:20,630 --> 00:11:24,777
all the way from 1200 to 600 and less, right?
192
00:11:29,710 --> 00:11:33,230
So of course the blue border is still being applied
193
00:11:33,230 --> 00:11:35,520
because there is no conflict there,
194
00:11:35,520 --> 00:11:38,060
but then here with the background color of course
195
00:11:38,060 --> 00:11:39,680
there is a conflict,
196
00:11:39,680 --> 00:11:42,610
and so now it is this one who is being applied
197
00:11:42,610 --> 00:11:45,903
simply because it appears the less in our code.
198
00:11:47,340 --> 00:11:51,300
Okay, and with this, I hopefully you understood
199
00:11:51,300 --> 00:11:53,763
the fundamentals of media queries.
200
00:11:55,110 --> 00:11:57,030
Now, usually during development,
201
00:11:57,030 --> 00:11:59,420
we keep this window here big,
202
00:11:59,420 --> 00:12:02,460
and instead what we do, we click on this icon here,
203
00:12:02,460 --> 00:12:05,530
so to toggle this device toolbar.
204
00:12:05,530 --> 00:12:09,080
And so what this gives us is basically a way to simulate
205
00:12:09,080 --> 00:12:11,363
smaller view ports right here.
206
00:12:12,410 --> 00:12:14,740
So without having to manually resize
207
00:12:14,740 --> 00:12:16,073
the browser all the time.
208
00:12:17,670 --> 00:12:19,300
So here in this menu,
209
00:12:19,300 --> 00:12:21,870
we can select from different devices,
210
00:12:21,870 --> 00:12:25,380
and so then we get basically the dimensions
211
00:12:25,380 --> 00:12:27,330
of those devices.
212
00:12:27,330 --> 00:12:32,330
So the iPhone 6 Plus for example, has a width of 414
213
00:12:32,570 --> 00:12:37,120
and a height of 736, and yeah.
214
00:12:37,120 --> 00:12:38,970
Here you have all these different devices,
215
00:12:38,970 --> 00:12:41,560
the iPhone X for example,
216
00:12:41,560 --> 00:12:44,320
but the one that we are interested in here for now
217
00:12:44,320 --> 00:12:45,690
is simply this one here.
218
00:12:45,690 --> 00:12:48,400
So simply responsive because then
219
00:12:48,400 --> 00:12:51,083
we can drag or size as we wish.
220
00:12:51,960 --> 00:12:53,570
So just like this,
221
00:12:53,570 --> 00:12:57,970
and here we then have also this scale factor.
222
00:12:57,970 --> 00:13:02,970
So we can like set this to 75 and then we can nicely see
223
00:13:03,520 --> 00:13:05,693
what's going on at different viewports.
224
00:13:07,550 --> 00:13:10,750
So let's see, and indeed now our media query
225
00:13:10,750 --> 00:13:13,620
is being applied because we just passed
226
00:13:13,620 --> 00:13:15,823
our 600 threshold here.
227
00:13:17,750 --> 00:13:21,550
So see, it changes exactly at 600.
228
00:13:21,550 --> 00:13:24,750
So we can even manually set that here to 600
229
00:13:25,770 --> 00:13:28,120
and then there we go.
230
00:13:28,120 --> 00:13:31,327
So at 600 it applies but not at 601.
231
00:13:34,140 --> 00:13:38,280
All right, so this is the tooling for media queries,
232
00:13:38,280 --> 00:13:40,733
and you also already learned how they work.
233
00:13:41,640 --> 00:13:42,870
Now in the next lecture,
234
00:13:42,870 --> 00:13:45,800
we will figure out which breakpoints...
235
00:13:45,800 --> 00:13:50,260
So which width here we should actually use in our design,
236
00:13:50,260 --> 00:13:51,610
because there are of course
237
00:13:51,610 --> 00:13:55,350
many different ways in which we can select these.
238
00:13:55,350 --> 00:13:59,160
So 600 and 1200 are just some examples,
239
00:13:59,160 --> 00:14:02,570
but we could use any value here, of course.
240
00:14:02,570 --> 00:14:05,563
So this could just be like 857,
241
00:14:07,010 --> 00:14:08,763
or really whatever we want it.
242
00:14:09,640 --> 00:14:13,860
So how do we know which values we should choose here,
243
00:14:13,860 --> 00:14:17,600
and also how many media queries we should write?
244
00:14:17,600 --> 00:14:21,593
Well, let's learn that as I just said in the next lecture.
18297
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.