Welcome back.
In this lesson, we're going to be discussing how to write media queries with says so we're going to
go back to our Lakeview project for this and we are going to make it responsive.
But this time we're going to be using SACE media queries.
Now, what do I mean by that?
So if you remember, this is the Digitas Project's media queries that we had written.
We had created a separate access file that we had written all the media queries in one place.
All right.
And we had written it like this.
We had written Adric media grade as the media directive and specified different max width for different
devices.
And within each of these media queries, we gave all the required settings or all the required properties
that we needed.
OK, so we wanted this class to have this property for this media gallery, for this device, we wanted
this class to have this property and this class to have these properties.
So we had put everything into one page.
But when you're using SAS, you could do this.
But it's better if you use make sense for it.
OK, and why do I say that?
It's because then it makes it more relevant to your cell structure.
Your cell structure is made in such a way that your website is scalable.
It's easily editable.
And so it's better if you have if you include it into all your other SACE stylesheets.
OK, because again, you want it all to come inside.
Your CSIR ultimately compiles this file.
OK, so let me just show you.
Let's go back to our Lakeview.
So this is the fast folder and you have all your source files in this.
All right.
Let's go into the base.
This is where we start and the base font size for the whole document is given us sixty two point five
percent because we wanted one ram to be equal to 10 pixels for this whole document.
And the purpose for putting this for putting this percentage and specifying everything in RAM was,
if you remember, is because we wanted this whole website to be easily responsive so that just by changing
the font size for the different devices, for the different media queries, I can change the sizes of
everything accordingly.
So if I want, let's say A for a device which has a screen width of, let's see, nine hundred pixels,
nine hundred to twelve hundred pixels is for landscape tablets, OK, tablets which are in landscape
format which are in landscape.
So for that, what I would do is I would write the media query like this, I would write at let me just
copy this.
OK, I would say this one, OK.
So I would say.
At media only screen and Max with one thousand twenty three pixels and inside this, I would say I want
the font size.
To be.
How much, let's see.
Fifty percent.
OK, so this is how I would typically put the media away.
You could do it both ways.
You could either create a whole file access file and put all the media queries in it, or you could
provide the media queries within each of the relevant selectors.
And I think if you have larger files, this is a better way to design your stylesheets because then
everything is there in one place, you don't have to go to the media file and then see if there is something
for, let's say, for the HTML selector or for some other class selector.
You don't have to separately go over here and find out if it's there.
There is a media query for selector.
It'll be inside the selector itself.
But the disadvantage of that is if at some point you decide that you don't want this breakpoint to be
one thousand twenty three pixels, you want this breakpoint to be one thousand pixels.
So then what will you have to do?
You will be having probably a media queries in lots of places.
You'll be having a media query in the body.
You'll probably have a media query inside.
Let's say you have a media query inside the button file.
You have another media query for the same device inside, let's say the contact file.
So you have so many files with this media query.
And so you have to go to all these places everywhere.
You have a media query for this device and then change the pixel value from 1023, the unit, I mean
the required value from one thousand twenty three.
You'll have to change it to 1000 everywhere.
So that's going to be really tiresome.
And that sort of goes against the whole idea of SAS, right?
I mean, what's the purpose of using SAS?
You want your program to be scalable, easily scalable, easily editable.
You want it to be nicely organised.
So if you have to change a value, one small value, if you have to go to thousands of places to change
it, that actually serves no purpose.
Right.
So that's why a better way to use media queries is by using or taking advantage of a very good SAS concept,
which is the mix.
So if you can use makes sense for media queries, you're going to make things much, much easier and
it's going to make things much more practical.
And I'll show you how.
So let's just go into our mix and file.
And we're here, let's define a mix in for our media queries, right?
We're going to call this mixin.
We call it.
Respond, OK, because he's going to respond or make it make our website responsive.
OK, so we're going to respond.
And then you can define whatever you need to and say this, all right, before we start creating the
mixin.
Let me first write down what are the different break points that we will be using?
The break points usually like before we use these break points.
Right.
We had used one thousand two hundred for our source project.
We had used one thousand two hundred one thousand twenty three pixels for larger tablet screens than
seven hundred and sixty eight for smaller screens, etc..
A better way of doing it.
This was actually just based on the theory.
Right.
But devices are always changing.
Each year there are newer iPhones, there are Android phones and each device has a different screen
with.
Right.
So then how do you keep up?
You have to keep up.
Right.
So what we do for that is go online, do a quick Google search.
We can see success, breakpoints.
Let's see what big points, twenty, twenty one and you get.
Usually the first website is good enough to give you quite authoritative websites where you have websites
which have good authority over the keyword that you type.
So this is going to be good enough.
OK, so you can use these breakpoints for your design.
These are going to be the latest ones.
So let me just copy this into my file.
So we have zero to five hundred seventy six seventy six pixels for portrait phones, then we have five
hundred and seventy seven to seven hundred and sixty eight pixels for tablets.
OK, and there's something missing over here.
This is for tablets that are in portrait mode, OK.
And we also need one for tablets that are in landscape mode.
So we'll see tablets in landscape mode.
OK, and that will be seven hundred and sixty nine pixels to around nine hundred and ninety one pixels.
OK.
After that, nine hundred and ninety two pixels on words were left off 10 or 20 to two, we'll see still
around twelve hundred pixels for laptops.
And finally, there's one more device that you can take into account, and that is devices which are
bigger screens, you know, desktop monitors, which are larger in size.
So these have around more than eighteen hundred pixels, actually.
So we'll do this.
Nine hundred ninety two to eight hundred.
OK, we'll just do this, OK?
All right, and now let's start devising our mixin.
First of all, no, how do you create this mix mixing is going to be a little bit different from the
usual remixing that we've been writing so far.
One thing you need to know is mixing can also have values passed to them so they can even have parameters
just like functions.
So you can put these brackets here and you can pass any parameter.
So let's say we'll call the parameter for this mix in breakpoint.
So wherever you're going to be, including this mixin, you're going to be passing a breakpoint value
there.
All right.
And that breakpoint value will be the text value, which will contain the device that you want to give
the military for those breakpoint parameters and let's say, have different values that can have maybe
a value like phone.
OK, these are all text values, string values, or you can have a value for tablet phones.
It's going to have a value of tableful, let's say a d'abord.
Because tablet in portrait mode and or you can have tablet in landscape mode or you can have big desktop,
so you can have these kinds of different device names.
She can have portrait the device sizes between zero to five hundred seventy six pixels.
It's going to be a portrait for five hundred and seventy seven to 768 pixels, tablet and portrait mode.
If it's between 769 and 991, that is going to be a tablet in landscape mode if it is between.
You don't need this because we already create.
This is a desktop first approach, right?
This is a desktop first website.
So we've already designed the whole thing for the website.
So we don't need a media query for this breakpoint.
And if it is above twelve hundred pixels, then it's going to be then the breakpoint variable is going
to have the value of big desktop.
OK, so what we can do is inside McKesson's or inside SACE, we can also use something called an if
DirecTV and if DirecTV is something like an if statement or a condition where you can compare values.
OK, so if you can say if.
Breakpoint.
The point is, this variable here, this parameter here, OK?
So if this so this one.
So if this breakpoint.
Foon, the breakpoint has the value Foon then.
What are we going to do?
We're going to have a media gallery over here.
Similarly, if the breakpoint has a value.
D'abord.
Then what are we going to do then again, if it has a value?
Tableland.
And if it has the value.
Big desktop.
So for each of these if conditions or if directives, we're going to have a separate media query, so
we're going to write how how the media are you supposed to go?
Supposed to go like this.
So media.
Only screen and max width will be the phone is going to be.
Max, with 576 pixels, OK, and you need curly braces inside.
So similarly, we're going to have a media query for portrait doublets, a media query for landscape
tablets and a media query for big desktops.
OK, let's just copy the breakpoints.
So the sixty.
Then there's nine ninety one.
And there is.
OK, 12000 pixels plus Sawaya, it's not going to be Max, which is going to be obviously Menwith.
All right.
All right, and now what are we going to have inside this inside this we want?
Whatever content.
That we want inside each of these different selectors now for different selectors, you're going to
have different content, right, for the media, very like for the selector.
Maybe you want to change the font size for, let's say, for the button selected, maybe one.
You might want a different colour for the buttons in a different device.
Let's see the background color property is going to be different for a mobile device.
OK, so you're going to have different content for different media queries.
How are you going to handle that?
How are you going to make sure that no matter what content you have for different media queries, it's
all going to get copied into here?
Will that be possible?
It is possible, actually, and how it's possible is by using one more directive called the content
directive and what this does is the content.
It just puts in whatever content you have inside the include statement, like, for example, I'll just
show you how this works, because let me just put this content everywhere first and then you'll see
how it works.
So I have the same thing, content, content directive, and now let's see, I define a font size for
this HTML selector.
OK, and how will I do it?
How will I define it?
Obviously.
How do you include Markson's inside a selector?
You use the include.
Directive.
And then you say include include the name of the mixin is respond, and you passed the parameter here
because we wanted a parameter.
For this point, so let's say you want a parameter for the phone, so whenever there is a phone device,
there is a variable, there is a device which has a width of zero to five hundred seventy six pixels.
We want.
This to be called, and what do we want to happen, we want it size to become 50 percent.
Now, how is this going to work when you use this include DirecTV with this mix in name, so that mix
in this mix and gets included in this place and this value phone gets passed into this.
Parameter.
And what else happens, the content, which is inside the curly brackets of the include, gets copied
into this content part over here.
Over here, you'll get it better when I run this.
When I compile this and I show you how the filesystems file looks.
OK, so the file is getting compiled.
And it's rendered.
So let me open the access file.
It's here.
And now let's see.
This was in the HTML, right?
OK, so he's here.
Here is your media query.
What happened?
This HTML selector.
Then you have this font, right?
This is fine.
And after that, you had included the mixin for fun, right?
So what got copied here?
You got the media query with Max with five hundred seventy six because five hundred and seventy six
was the width for the phone.
Let's take a look at the break point for the phone with five hundred seventy six pixels.
Right.
So this got copied here.
And what got copied inside the content, the font size 50 percent, which came from our include DirecTV.
So you see, this is how you're going to use make sense for your media queries.
Whatever content you put inside, your include gets copied into your mixes, content, DirecTV.
All right.
So let's complete this now.
So we want whenever it's a phone, we want the font size to be 50 percent.
Now, why did I write 50 percent of the font?
Can you understand?
The same reason I put sixty two point five percent for the road Fonz's, because I want when I was defining
the route font size, I wanted one ram to be equal to 10 pixels so that it was easy for me to convert
the sizes everywhere.
Right.
So since I wanted one ram to be equal to 10 pixels and actually the original root font size is 16 pixels.
Right.
The font size which comes from your browser is 16 pixels.
But I want one ram to be 10 pixels.
So 10 pixels means what, 10 pixels means 10 by 16 times 100.
Important.
OK, sorry, it's 16 here, not 15.
So 10 pixels is ten, divided by 16 because 16 is the original value of your own size of the root font
size, but we want to convert it to 10.
We want one ram to equal to 10 pixels, not 16 pixels.
So that's why we divide a 10 by 16 and then multiply it by one hundred and you get sixty two point five
percent.
Sixty two point five percent of 16 pixels.
All right, similarly, we want whenever the device is a phone, actually, before we go on to the phone,
let's call like from the bigger devices and then go towards the smaller devices, because that's how
you design your media queries for the desktop first designs.
Right?
So we first write.
For tablets, OK?
Landscape tablets.
OK, so tablets which are in landscape mode.
So when the device is a tablet, which is in landscape mode, I want one ram to be a little bit smaller
in size so that everything reduces in size, all the images, all the buttons, all the background images.
I want everything to be reduced to a smaller size.
And because everything is in REM's, it's easy if I just define the ram to be of a smaller pixel value
for the landscape, for the tablet in landscape mode.
I want one ram to be not ten pixels.
I want it to be smaller.
I want it to be eight pixels.
OK, so if I want one ram to be eight pixels, how much percentage is that of 16 pixels.
It's 50 percent rate because eight by 16 is half OK times.
One hundred will be 50 percent.
OK, now let's define the the font size for all the other devices.
OK, so let's after a tabloid landscape mode, let's define for tablet in portrait mode.
OK, so when it is important, what I want it to be a little bit smaller in size.
So I want it to be actually if it isn't portrait or landscape mode, let me keep it the same for the
time being now.
And if we need any changes made with me, we'll make it later.
OK, so a tablet in portrait mode, tablet in landscape mode.
I want it to be the same.
And then in fact, let me do this, OK?
Let me make the tablet.
One room equals nine pixels not sorry tablet in landscape mode.
Let me make it one pixel.
One ram is nine pixels and four tablet and portrait mode.
Let it be.
One room equals one eight pixels.
And for the mobile phones let me make it one.
Ram equals eight pixels itself.
I don't want to change that.
And the last one is the large desktops or big desktop.
OK, so I want that to be first because that is a bigger device.
OK.
So we went from big to small.
We'll have to define the larger devices first.
Big desktop.
OK, over here, I want one room to be equal to 12 pixels, it should be bigger than ten.
OK, because Dennis for the normal laptop screens.
OK, so now let's convert this one room.
We want it to be 12 pixels.
So that is how much percentage of pixels that will be 12 by 16 times one hundred, which is seventy
five percent.
OK, so we want it to be 75 percent of 16 pixels.
Then what about this one equals nine pixels, which is how much percentage of 16 pixels, fifty six
point two five.
Percent.
OK.
And.
These two are going to be the same.
OK, so let me just change it everywhere.
This will be.
Seventy five percent.
This will be fifty six point two, five percent.
This Lufti and this will be a great.
So we're done with this part as well.
Let me now see how the website looks when I reduce the size.
OK, we've defined the media queries already, so this is our new website.
And you know how to see the different views to see how responsive our pages go to inspect Element after
clicking.
And then click on this responsive design mode button here.
All right, and here we are.
And on top, you can see that the width and the height.
And you can now drag it around so as you can see.
As you reduce the size, the sizes, so you can you see over here the sizes of these buttons and the
fonts and everything reduces accordingly.
For example, see look at the breakpoint.
Okay, what was the break point?
The first break point was tablet landscape.
Tablet landscape was at nine hundred and ninety one pixels.
OK, so let's try nine hundred and ninety one pixels, OK?
So.
Here we are so fast, it's like this, and then we reduce it, we reduce the size to nine hundred and
ninety one, just keep an eye.
There you see from nine hundred and what is it, 1000 and then let it go down, down, down, and you
see a sudden change in the size.
Can you see the change in the size?
Again, the next breakpoint is at seven hundred sixty eight.
So let's take a look.
Let's reduce the size.
Until it comes to seven hundred and sixty eight.
Yeah, we have to improve all these things.
OK, and.
See, it reduces, again, the button size.
Again, let it go down.
And once it is at five hundred and seventy six, it doesn't reduce the size anymore.
OK, once you are at five minutes every six, you don't see any more changes in the size.
OK, we have to think about making these changes here.
All right.
Well, we've defined the basis for our media careers and now what's left to do is go point by point,
go to each of these places, each of these sections, and change whatever needs to be changed.
But also notice how our work is already done.
Most of the work is already done.
We just have a few small things to change here and there.
And then your page will be nicely responsive.
So I'll see you around in the next listen.