As a conclusion of the advance properties of the siestas, let's talk now about the foundation for the
responsive design that are the media queries.
The media queries inside our time sheets have the aim of enabling us to insert determined properties
into selectors, making them display according to the browser window resolution and can be inserted
thanks to the.
ET media rule.
Within this rule, the first thing to specify is the type of media we want to consider.
In our case, let's insert screen.
It is the fundamental base to represent PC, desktop, tablet and cell phones so that to make every
medium different.
So according to the different devices, what we should do at this point is inserting and and the rule
which will contain max or min width.
That is the greatest or the least with.
By starting, for example, from mux width and setting one thousand twenty four pixel as reference value,
we can then open our selector and insert into this rule.
All those functions which are supposed to appear in the case, the screen is one thousand twenty four
pixel maximum, which is.
The iPad pro resolution to make things easier, let's delete.
What we have inserted so far, leaving exclusively body.
Inside a dark age time out.
Let's leave only our H.
One title, which doesn't have any type of selectors as linked.
The first thing we are going to see is the way the Media Queries Act.
Therefore, inside media screen Max, with one thousand twenty four pizza, we are inserting a new buddy.
In so doing, this selecter, when a screen meets a one thousand twenty four pixel maximum with.
We'll have different features from what seen inside the generic selecter.
So what will happen in case any other greater than one hundred twenty four pixel width is present?
Therefore, that Copi the body content and let's modify it, let's insert area as one family, let's
change the background color into black and as color, let's insert.
White.
Now we can save refresh and we'll see that our screen has undergone a change, according to the media
query inserted if we wanted to widen our.
Prevue.
Once over the one thousand twenty four pixels, as you see, the setting of Buddy has gone back to normal,
getting back as you see.
Automatically, thanks to media query the Cyesis, modify the setting of Buddy.
It would work the same way if from Max, we should insert men, so let's save and refresh and by widening
automatically, the screen alters its features.
So these media queries will be essential when it comes to realize a responsive website.
Therefore, when we deal with all these features.
Which are supposed to modify themselves in the development of a website moving from one device to another.
Now that we have ended these theoretical but also practical part, let's call it this way, because
this was let's start with drilling down the innovative topics that will take us to be able to create
together a project making us create our own personal page with some content able to adapt perfectly
to any device with only the help of HDMI and Cyesis.