0 votes
in Website Optimization by
What are media queries and how are they used in web design?

1 Answer

0 votes
by (84.7k points)

Media Queries are CSS codes that provide display instructions according to screen size.
Examples of a media query is a CSS code that instructs browsers to load website images depending on the screen size.

Load 720 px banner image in the header of desktops and loads 350 px banner image in the header of mobile devices”

Example  1

p {
font-size:15px;
}

Example 2

@media only screen and (min-width: 450px) {
p {
font-size: 18px ;
}
}


Example 1 is a normal CSS which says the font size for the text is 15 px.

Example 2 is a Media Query which says that if the screen size is more than 450px then the font size of the text should be 18px.

 Media queries are used to design responsive mobile web pages.

Welcome to Kenyayote Q&A, where you can ask questions and receive answers from Kenyayote staff and other members of the community.

Before you ask, search the website to make sure your question has not been answered.
If you are ready to ask, provide a title about your question and a detailed description of your problem.
...