DEV Community

Preet Suthar
Preet Suthar

Posted on • Originally published at preetsuthar.me

@media screens - CSS

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

to have background color when the user opens website in mobile phone so we use the @media to specify the width, how much width it should be to apply the background color property to .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

Preview

When width is greater than or equal to 768px

Image description

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

compatibility

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)

Collapse
 
jburky15 profile image
Joe Burkhart

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.

Collapse
 
preetsuthar17 profile image
Preet Suthar

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!