Introduction
The most effective CSS idea for making responsive web pages is media queries. In this article, we will Learn Media Queries in CSS. The @media rule is used in this method, which was first implemented in CSS3, to contain a block of CSS properties that will be called when the condition is met.
Media queries allow web pages to be shown differently depending on the screen resolution or device width of various devices, such as computers, tablets, mobile phones, etc.
When a web page displays well across all screen resolutions or devices, it is responsive. The website should perfectly fit and work on all devices regardless of screen resolution. Fonts, pictures, and other page elements should all instantly adjust to fit any device. Media queries enter the picture to make this happen.
Media Types
- All: suitable for all devices
- Screen: It will function on gadgets with screens.
- Print: To see documents in print preview mode while they are displayed on a screen.
- Speech: It functions for content-reading devices like screen readers.
What are media queries?
A responsive site design is made using the Media query in CSS. It indicates that a web page’s display varies from system to system depending on the screen or media type. The breakpoint indicates the device width at which the content begins to distort or break.
Many items can be checked with media queries, including
- the device’s width and height
- the viewport’s width and height
- Orientation
- Resolution
Syntax
@media media-type (media-feature / conditions){
/* css styles */
}Max – Width
This is how a max-width query works:-
@media only screen and (max-width: 700px){
/* styles */
}
According to the code snippet above, the media query block’s given styles will be applied if the device width or screen resolution is 700px or less. This indicates that the styles in the code block will be applied to resolutions ranging from 0px to 700px.
Min – Width
This is how the min-width query works:-
@media only screen and (min-width: 701px) {
/* styles */
}According to the code above, the following styles should be applied if the device width is higher than or equal to 701px. If we use a media query with min-width: 701px, it signifies that the styles will be applied starting from the resolution of 701px.
Combining Max-Width and Min-Width
@media only screen and (max-width: 700px) and (min-width: 400px) {
/* styles */
}
The styles in the above-combined code block will be applied from the resolution 400px to 700px; other resolutions will not be impacted. We may also attach media features together. When we wish to apply the styles from one resolution to another targeted resolution, we can utilize this method.
Also Read Selectors in CSS
Media Queries Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Learn about Media Queries in CSS</h1>
<p>A responsive site design is made using the Media query in CSS. It indicates that
a web page's display varies from system to system depending on the screen or media type.
The breakpoint indicates the device width at which the content begins to distort or break.
</p>
</body>
</html>CSS Code
Using media queries, we are now altering the article’s background, as well as the heading and paragraph’s colors and fonts, on mobile devices or at particular screen resolutions.
@media only screen and (max-width: 767px){
body{
background: blue;
}
h1{
font-size: 32px;
}
h1, p{
color: white;
}
}
Max- Width Example
<h1>Learn about Media Queries in CSS</h1>
<p>A responsive site design is made using the Media query in CSS. It indicates that a web page's display varies from system to system depending on the screen or media type. The breakpoint indicates the device width at which the content begins to distort or break.</p>@media only screen and (max-width: 767px){
body{
background: red;
padding: 10px;
}
h1, p{
color: white;
}
}
Min-Width Example
<h1>Learn about Media Queries in CSS</h1>
<p>A responsive site design is made using the Media query in CSS. It indicates that a web page's display varies from system to system depending on the screen or media type. The breakpoint indicates the device width at which the content begins to distort or break.</p>@media only screen and (min-width: 768px){
body{
background: yellow;
padding: 10px;
}
h1, p{
color: black;
}
}
Example of a combination of both min and max-width
The conditional behavior of the media characteristics max-width and min-width has been demonstrated thus far. Let’s see an instance that combines the media features max-width and min-width.
<h1>Learn about Media Queries in CSS</h1>
<p>A responsive site design is made using the Media query in CSS. It indicates that a web page's display varies from system to system depending on the screen or media type. The breakpoint indicates the device width at which the content begins to distort or break.</p>@media only screen and (max-width: 767px) and (min-width: 414px) {
body{
background: green;
padding: 10px;
}
h1, p{
color: white;
}
}
Common Breakpoints
The common breakpoints for different devices are:-
- 320px — 480px: Mobile devices
- 481px — 768px: iPads, Tablets
- 769px — 1024px: Small screens, laptops
- 1025px — 1200px: Desktops, large screens
- 1201px and more — Extra large screens, TV
Conclusion
- Responsive web pages are made using media queries. When the condition is met, the block of CSS properties will be applied because it employs the @media rule to include them. It is a method for adapting various styles to various gadgets, including smartphones, tablets, laptops, and desktop computers.
- Based on the supplied feature or condition, media queries enable us to apply a set of styles to the elements that are written inside their curly braces {}.
In this article, we learnt about the Media Queries in CSS. Hope this article helps you in understanding the concept of Media Queries in CSS. Thank you for reading the article.
1 comment
Comments are closed.