Introduction
While creating website you need to make sure that your website is responsive and works well in every device with any width. Using @media screens makes your website responsive and helps your website to be more efficient and allows the website to list in SEO higher rank.
In this blog post we'll cover up basic fundamentals about @meda queries in CSS so let's get started!
Understanding @media
Let's understand the @media in CSS. Well this allows developers to specify specific component for specific defined width. Let us say we want <div class="container">Hello there 👋!</div> to have background color when device is mobile (I know it makes no sense but still) we want
.container. Let's see the syntax for @media and then we'll se example.
Syntax
Display width
@media screen and (max-width: 768px) {
/* Styles here for the device with width of 768px */
}
In this @media we defined that if the width is less than 768px than the code inside @media will execute. We provided maximum width for the device to apply the style inside @media.
When width is less than 768px
When width is greater than or equal to 768px
Display height
Just like width we can also use the @media for height of the display
@media (height > 600px) {
body {
line-height: 1.4;
}
}
Check out the codepen example here
So yeah that's the most basics about @media screens in css if you have any query feel free to ask in comment, Thank you for reading!
Top comments (2)
Media queries are definitely a huge thing to learn early on when learning CSS. It's always important to design for mobile first when it's applicable to your website (which most will be). This is a good article to get people interested in learning more about this topic.
Yeah, you're correct while creating website it's required to design for mobile first and then computers and all. thank you for showing interest!