Ansari Yaseer's blog

Introduction to CSS Media Query Basics

"A Complete Guide to Building Responsive Websites"

Ansari Yaseer's photo
Ansari Yaseer
·

5 min read

Introduction to CSS Media Query Basics

Table of contents

In web design, creating a responsive and dynamic layout can be a challenging task. Before we dive into the basics of CSS Media Query, it's important to note that having a solid understanding of CSS basics is crucial. If you're new to CSS, I highly recommend that you check out my previous articles, where I've taken you on a journey from the basics to the more advanced concepts of CSS.

You can find the links to these articles:

These articles provide a solid foundation of knowledge that will be helpful as we dive into the topic of CSS media queries.

However, designing for different screen sizes & devices can be a bit tricky. You might have noticed that whenever you use the website on various devices, that website seems quite different in appearance, element alignment, or functionality. Ever wonder how this happens?

In this article, we will try to understand it with some basics example. We will be discussing CSS Media Queries, which is a powerful tool that allows web developers to create responsive and adaptive websites.

By the end of this article, you will have a good understanding of how to use media queries to make your website look great on all devices. Don't forget to check out the code files related to this article, which can be found at the end.

What is a Media query?

The Media query in CSS allows the creation of a responsive web design. The appearance of the web page differs from device to device. CSS media queries are the method to pick out browsers by features and then apply some styles according to our requirements.

The most common media queries are those that target specified viewpoint ranges. Besides this, there are other things to target, maybe screen resolution, device orientation, and many more, to style content. These techniques can help create beautiful, flexible, and responsive web designs.

Media queries can be used in Html and JavaScript. But our main focus will be on CSS. If you want to know more about this you can visit here.

Media query in CSS

Most of the time, Media queries are placed in CSS. They are mentioned directly in the stylesheet in a media rule, which sets elements with conditions for when and where to apply the features when a browser matches those conditions.

Syntax:

@media [media-type] ([media-feature]) 
{
  /* Styles! */
}

Let's see each part in little detail:

@media rule:

The @media rule allows style rules inside of it. This rule contains condition statements for targeting styles to specific screens. These conditions can include screen sizes, which can be helpful to adjust styles for various devices.

Media types:

It defines what kind of media we are targeting. The most common media type is screen value because we often try to match devices with screens of different sizes.

There are many other types of media types:

  • print: It is used to match documents that are viewed in a print preview.

  • all: It is used for all media devices.

  • speech: It is used for screen readers that read the screen aloud.

Media Features:

Media features are used to match some specific characteristics of the device or environment. Media features check for their presence or value. We have used the image min-width and max-width with media type screen with specific values.

Common Media features:

  • width: The viewport width.

  • height: The viewport height.

  • aspect ratio: The ratio between the width and height of the viewport.

Other than this there are many features of media query which you can find at:

Operators:

There are four logical operators not, and, only and or. In simple words, it's used to make logical conditions for matching media types and features.

  • and Used to combine two or more media features into a single media query.

  • not Used to negate the media query.

  • only It will apply a style only if a whole query matches.

  • or /, (comma) Used to combine multiple media queries into a single rule and if one of the media queries is true, the entire media statement returns true.

Small Project Using CSS Media query:

To understand it better, study the small project below with code pen and GIF demonstration of End-result.

https://codepen.io/AnsariYasirArfat/pen/qBKeWrw

End-Result: Demonstration of screen size defined in code.

Conclusion:

In this article, we have covered the basics of CSS media queries & how to use them to create responsive designs for different screen sizes. To further practice what you have learned in this article, I have included a small project that demonstrates how to use media queries to create a responsive design for a web page. You can find the code for this project in the link provided below.

Here link to code files:- GitHub.

Website:- Small project using CSS media query

Remember, mastering CSS media queries takes practice and patience, but with the knowledge you have gained from this article and the additional articles & resources I have provided in this article, you will be well on your way to creating beautiful & responsive web designs.

I hope this article has given you a solid understanding of CSS media queries & how they can be used in your web designs. If you're interested in learning HTML and JavaScript, be sure to check out the following articles on HTML & JavaScript:

And in the JavaScript article, you will find a series of articles, where I explain the fundamentals of JavaScript in separate articles. With this knowledge, you'll be well on your way to becoming a skilled web developer. So keep learning and stay curious!

Thanks for reading this article. I hope it was helpful to you.😇😇

Please feel free to share your thoughts by leaving a comment below.

iwritecodeWeb DevelopmentBeginner DevelopersCSSmedia queries