--- title: "How to use @media in CSS" description: "@media Questions have incredible potential for responsive design, ensuring your website looks great on a variety of devices and screen sizes." author: "Ashutosh Patel" published: 2024-06-10 updated: 2024-06-10 canonical: https://www.mindstick.com/articles/336052/how-to-use-media-in-css category: "css-css3" tags: ["css-css3", "css", "css styling"] reading_time: 3 minutes --- # How to use @media in CSS ### Using @media in CSS Using @media in CSS allows you to apply specific options based on media conditions, such as [screen size](https://answers.mindstick.com/qa/102727/what-is-the-ideal-laptop-screen-size), device [orientation](https://www.mindstick.com/interview/2604/what-is-orientation), or print settings. ## Syntax- ```css /* Maximum width of 600 pixels for screen*/ @media screen and (max-width: 600px) { /* Your styles here */ } /* Minimum width of 601 pixels for screen */ @media screen and (min-width: 601px) { /* Your styles here */ } /* For print media */ @media print { /* Your styles here */ } ``` In the `@media` rule, you specify the media type (`screen`, `print`, `speech`, etc.) and media properties (such as `max-width`, `min-width`, `orientation`, etc.), with conditions parentheses in [curly braces](https://answers.mindstick.com/qa/31876/when-we-use-curly-braces-in-the-string-format-its-not-working-in-c-sharp) follow if you type the CSS code It must be enforced to meet the conditions specified. if you want to change the font size when the **[screen width](https://www.mindstick.com/forum/158674/how-can-you-make-an-image-adjust-its-size-based-on-the-screen-width)** is less than or equal to **600 pixels** ```css @media screen and (max-width: 600px) { body { font-size: 14px; } } ``` You can also [combine multiple](https://www.mindstick.com/forum/160929/help-with-writing-a-query-to-combine-multiple-rows-into-one-in-sql-server) situations with logical operators such as **and**, **not**, and **only** ```cpp @media screen and (min-width: 600px) and (max-width: 900px) { /* Your styles here */ } ``` This rule applies styles only when the screen width is between 600px and 900px `@media` Questions have incredible potential for [responsive design](https://answers.mindstick.com/qa/114539/how-does-responsive-design-enhance-user-experience-across-various-devices), ensuring [your website](https://yourviews.mindstick.com/view/85950/why-organic-search-is-the-game-changer-for-your-website) looks great on a variety of devices and [screen sizes](https://answers.mindstick.com/qa/112151/how-do-i-implement-responsive-images-to-cater-to-different-screen-sizes) ## Example- ```html Responsive Design Example

Responsive design Example

This is a simple example of how you can use media queries to create a responsive design layout.

``` ## In the above example- - By default, the width of the .container element is 80%, and it consists of a central content area with some padding and a white background. - [If the screen](https://answers.mindstick.com/qa/108738/what-if-the-screen-is-frozen) is 600 pixels wide or less, the .container is 90% wide instead of 80% wide. This keeps the location of the information intact and takes up available space on smaller screens. ## Output- ![How to use @media in CSS](https://www.mindstick.com/mindstickarticle/74742921-f29e-40a7-8f4f-e665fb5e0616/images/05deec1e-fc1e-40aa-aa17-dfebe8e2efe7.png) **Also, Read:** [Advanced Flexbox Layouts using HTML and CSS](https://www.mindstick.com/articles/336044/advanced-flexbox-layouts-using-html-and-css) --- Original Source: https://www.mindstick.com/articles/336052/how-to-use-media-in-css Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.