CSS Media Queries: Beginner's Guide For Responsive Website
In the ever-changing world of web development, creating websites that look great and function seamlessly on all devices, such as mobile phones, tablets, and laptops is crucial. In this post, you'll learn about CSS Media Queries to make your websites responsive.
Let's jump right into it!🚀
What are CSS Media Queries?
CSS Media Queries are used to apply different styles on different devices based on screen width, height, device orientation, resolution etc. By using media queries, you can create web designs that respond perfectly to the user's device and enhance the user experience.
The Basic Syntax of Media Queries
The basic syntax for media queries is as follows:
@media media-type and (media-expression) {
/* CSS styles go here */
}
Here,
@media
: This is used to represent the beginning of a media query.
media-type
: This tells the browser that for what kind of media this code is. You can use the following values for this:
all - for all media-type devices.
print - for printers.
screen - for desktop screens, laptops, tablets, mobile phones etc.
speech - for screenreaders who read the page out loud.
media-expression
: This is a rule, that has to be passed for the CSS to be applied.
For example, when specifying the screen width as 600px in the expression, the associated CSS styles will take effect exclusively when the screen size matches this width; otherwise, they will remain inactive.
{ /* CSS styles go here */ }
: Here the CSS styles will be written that you want to apply to the given media-type
and media-expression
.
Let's take an example to understand this more clearly.
@media screen and (max-width: 600px) {
body {
background-color: red;
}
}
Here, media-type
is screen and media-expression
is max-width: 600px
which means this will change the background color of the body when the width of the screen is 600px or less than 600px (because here the maximum width is 600px).
The provided media expression is also called the breakpoint. So here 600px is the breakpoint.
Now, you might be thinking about what values you can give to media-expression
.🤔
Let me tell you the most common values for media-expression
.
width and height of the device
orientation (for example, tablet/mobile phone is in landscape or portrait mode)
resolution
ranged syntax
Let's see some examples to understand each of the above values.
Examples
The width and height of the device
@media screen and (max-width: 675px) {
body {
background-color: red;
color: white;
}
}
In this example, when the screen size is 675px or less than 675px, the background color and color of the body will be changed.
Device Orientation
You can give orientation as landscape or portrait.
/* Styles for landscape orientation */
@media screen and (orientation: landscape) {
body {
background-color: red;
color: white;
}
}
Resolution
You can also target devices based on their resolution.
/* Styles for high-resolution displays */
@media screen and (min-resolution: 300dpi) {
body {
background-color: red;
color: white;
}
}
Ranged syntax
@media (min-width: 375px) and (max-width: 758px) {
body {
background-color: red;
color: white;
}
}
In this example, when the screen size is between 375px and 758px, the background color and color of the body will be changed.
By using media queries you can set different CSS styles for different devices.
Common Breakpoints
Now, after learning about media queries, you may have a question "How do I know about the breakpoint of the screens?"🤔
So here are some commonly used breakpoints for the devices:
/* Extra large screens */
@media (min-width: 1920px){
/* CSS styles go here */
}
/* Desktops */
@media (min-width: 1200px) and (max-width: 1919px){
/* CSS styles go here */
}
/* Laptops/Large tablets */
@media (min-width: 992px) and (max-width: 1199px){
/* CSS styles go here */
}
/* Small tablets */
@media (min-width: 768px) and (max-width: 991px){
/* CSS styles go here */
}
/* Extra small devices */
@media (min-width: 481px) and (max-width: 767px){
/* CSS styles go here */
}
/* Mobile */
@media (max-width: 480px){
/* CSS styles go here */
}
Standard breakpoints are not explicitly defined, but you can use these commonly used ones to make your websites responsive.
That’s all for today.
I hope it was helpful.
Thanks for reading.
For more content like this, click here.
You can also follow me on X(Twitter) for getting daily tips on web development.
Keep Coding!!
Subscribe to my newsletter
Read articles from Shefali directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Shefali
Shefali
I am a passionate web developer from India. I find pleasure in talking about programming and I love to help everyone who needs any guidance related to programming.