Hello, everyone, and welcome back.
In today's video, we will learn about media, equities, media, equities as simple filters that can
be applied to CEOs of styles.
They make it easy to change styles based on certain characteristics of the device rendering your content,
these characteristics could be displayed dyed with height, orientation and even resolution.
But most of the times you will just be writing these media equity points using their device with condition.
This is this undocks what I think, media equities.
So we've got great media on the max with.
So basically, we're just telling the browser with the screen with this less than six hundred pixels.
Then use these stylus.
So inside these curly braces, you specify your stylist.
So let's say you created a paragraph with a font size of 24 pixels on a color red.
Now you want to change those tiles for all the devices which are of maximum with six hundred pixels.
Let's say you want font size to be 18 pixels and color to be blue.
So you could simply light those things in here.
So font size schoolin.
Sixteen pixels on glocal blue.
So you wanted to style for a range of with so we could do something like this.
So media screen.
Can we give him minimum, would a maximum with.
And again, inside the Guley basis, we specify the styles, what it will be required.
So here we are dealing.
If the screen with us between nine, 92 pixels and 100 pixels, then use these styles.
The values that I have used for creating breakpoints are not random values.
These are some values that you can use to target different device segments.
These values color majority of the screen sizes.
So for the first one, you're targeting extra small devices like mobile phones, four inch screen for
one five inch screen executer cetera.
So basically you're covering all the mobile screens which go up to 600 pixels of live.
Then the second one is you're targeting all small devices like portrayed more of tablet and large smartphones.
So basically, you're targeting all the devices, which are six hundred pixels and above and with then
you've got medium devices.
So these are landscape tablets.
So for this, we define a minimum width of 768 pixels.
Then you've got large devices.
So laptops, desktops.
So these go with a normal laptop.
So 15 inches laptops.
So here we are defining all the screen sizes above nine, 92 pixels.
And the last one is extra large devices.
So here we are targeting large laptops and desktops.
So here we're talking about like really large screen.
So you can think of a Mac.
So we are targeting all the screen sizes, which are above 200 pixels.
In the coming videos, we will explore more about media queries and how to use these break points to
define to design responsive the bailouts or to design responsive pages.
That's all for today, guys.
If there is something that you did not understand.
Feel free to drop a comment and we'll discuss it.
So you in the next video by Untogether.