1
00:00:00,740 --> 00:00:02,180
Hello, everyone, and welcome back.

2
00:00:02,630 --> 00:00:09,110
In today's video, we will learn about media, equities, media, equities as simple filters that can

3
00:00:09,110 --> 00:00:10,610
be applied to CEOs of styles.

4
00:00:11,690 --> 00:00:17,510
They make it easy to change styles based on certain characteristics of the device rendering your content,

5
00:00:18,470 --> 00:00:24,050
these characteristics could be displayed dyed with height, orientation and even resolution.

6
00:00:25,250 --> 00:00:31,370
But most of the times you will just be writing these media equity points using their device with condition.

7
00:00:32,450 --> 00:00:34,760
This is this undocks what I think, media equities.

8
00:00:35,930 --> 00:00:39,260
So we've got great media on the max with.

9
00:00:41,060 --> 00:00:46,130
So basically, we're just telling the browser with the screen with this less than six hundred pixels.

10
00:00:46,550 --> 00:00:48,110
Then use these stylus.

11
00:00:50,430 --> 00:00:53,530
So inside these curly braces, you specify your stylist.

12
00:00:54,690 --> 00:01:00,390
So let's say you created a paragraph with a font size of 24 pixels on a color red.

13
00:01:01,140 --> 00:01:07,440
Now you want to change those tiles for all the devices which are of maximum with six hundred pixels.

14
00:01:08,160 --> 00:01:11,710
Let's say you want font size to be 18 pixels and color to be blue.

15
00:01:12,480 --> 00:01:14,790
So you could simply light those things in here.

16
00:01:15,120 --> 00:01:16,280
So font size schoolin.

17
00:01:17,190 --> 00:01:19,920
Sixteen pixels on glocal blue.

18
00:01:21,000 --> 00:01:25,050
So you wanted to style for a range of with so we could do something like this.

19
00:01:26,130 --> 00:01:26,970
So media screen.

20
00:01:27,090 --> 00:01:29,830
Can we give him minimum, would a maximum with.

21
00:01:30,860 --> 00:01:35,220
And again, inside the Guley basis, we specify the styles, what it will be required.

22
00:01:35,720 --> 00:01:36,790
So here we are dealing.

23
00:01:36,950 --> 00:01:42,350
If the screen with us between nine, 92 pixels and 100 pixels, then use these styles.

24
00:01:43,250 --> 00:01:47,090
The values that I have used for creating breakpoints are not random values.

25
00:01:47,960 --> 00:01:51,230
These are some values that you can use to target different device segments.

26
00:01:51,830 --> 00:01:54,440
These values color majority of the screen sizes.

27
00:01:55,590 --> 00:02:01,830
So for the first one, you're targeting extra small devices like mobile phones, four inch screen for

28
00:02:01,830 --> 00:02:04,550
one five inch screen executer cetera.

29
00:02:05,520 --> 00:02:10,760
So basically you're covering all the mobile screens which go up to 600 pixels of live.

30
00:02:12,650 --> 00:02:20,100
Then the second one is you're targeting all small devices like portrayed more of tablet and large smartphones.

31
00:02:21,200 --> 00:02:26,810
So basically, you're targeting all the devices, which are six hundred pixels and above and with then

32
00:02:26,810 --> 00:02:28,630
you've got medium devices.

33
00:02:29,120 --> 00:02:31,430
So these are landscape tablets.

34
00:02:31,910 --> 00:02:35,960
So for this, we define a minimum width of 768 pixels.

35
00:02:36,650 --> 00:02:38,180
Then you've got large devices.

36
00:02:38,210 --> 00:02:39,980
So laptops, desktops.

37
00:02:40,360 --> 00:02:41,930
So these go with a normal laptop.

38
00:02:42,040 --> 00:02:43,850
So 15 inches laptops.

39
00:02:45,050 --> 00:02:48,860
So here we are defining all the screen sizes above nine, 92 pixels.

40
00:02:49,790 --> 00:02:51,780
And the last one is extra large devices.

41
00:02:52,340 --> 00:02:55,070
So here we are targeting large laptops and desktops.

42
00:02:55,580 --> 00:02:57,980
So here we're talking about like really large screen.

43
00:02:57,980 --> 00:02:59,690
So you can think of a Mac.

44
00:03:00,630 --> 00:03:05,070
So we are targeting all the screen sizes, which are above 200 pixels.

45
00:03:06,140 --> 00:03:10,850
In the coming videos, we will explore more about media queries and how to use these break points to

46
00:03:10,850 --> 00:03:16,570
define to design responsive the bailouts or to design responsive pages.

47
00:03:17,420 --> 00:03:18,470
That's all for today, guys.

48
00:03:18,560 --> 00:03:20,660
If there is something that you did not understand.

49
00:03:21,350 --> 00:03:23,720
Feel free to drop a comment and we'll discuss it.

50
00:03:24,840 --> 00:03:27,090
So you in the next video by Untogether.