Media Query CSS Examples with Max and Min Screen Width Codes
Media Query CSS Examples with Max and Min Screen Width
This article will delve into the effective utilization of responsive design and media query’s to achieve this goal. Additionally, practical code samples for media query employing maximum and minimum screen widths will be provided.
Ensuring your content appears visually appealing across various screen sizes is a crucial aspect of website design.
What is Responsive Design?
The concept of Responsive Design involves ensuring that your content maintains its visual appeal across all screen sizes. This encompasses the automatic adaptation of website elements such as layouts, fonts, and images to suit the user’s device.
In the early 2000s, developers primarily concentrated on optimizing their websites for larger screen sizes, such as those found on laptops and desktop computers. However, in today’s digital landscape, it has become imperative to consider a wide range of devices, including mobile phones, tablets, and even wearable devices like smartwatches.
An important component of responsive design are media queries.
Within CSS, media queries serve the purpose of applying specific styles based on various characteristics of the user’s browser, such as width, height, or screen resolution.
An illustration of a media query can be found on the learn page of freeCodeCamp.
On larger screen sizes, such as desktops, a search menu is visible in the upper left-hand corner. However, on mobile devices, the search menu is absent, leaving only the menu options and sign-in button displayed.
Here is the basic syntax for a media query in CSS:
@media media-type (media-feature){ /*Styles go here*/ }
Let’s break down what this syntax means.
The @media is a type of At-rule in CSS. Under specific conditions, these rules determine the appearance of CSS.
The media type denotes the classification of media pertaining to the device. Various media types encompass all, print, screen, and speech.
- all – works for all devices
- print – works for devices where the media is in print preview mode
- screen – works for devices with screens
- speech – designed for devices such as screen readers, where the content is audibly conveyed to the user.
According to documentation,
Unless the not or only logical operators are employed, the media type is not obligatory, and the all type is assumed by default.
Alternatively, you have the option to exclude the media type and utilize this syntax instead.
@media (media-feature){ /*Styles go here*/ }
The media feature pertains to the attributes of the browser, such as the viewport’s height, width, orientation, or aspect ratio. To explore a comprehensive list of potential media features, you can refer to the MDN documentation.
Affordable and Reliable Web Hosting Solutions by Hostinger
In this article, our emphasis will be on the width media feature.
If you wanted to create more complex media queries, then you can use logical operators.
- and – operator serves the purpose of combining multiple media features. When all of these media features evaluate to true, the styles enclosed within the curly braces will be applied to the page.
- not – This operator reverses a true query into a false and a false query into a true.
- , (comma) – The comma operator is used to separate multiple media features, and if any of the conditions evaluate to true, the styles within the curly braces will be applied.
Let’s explore some examples that illustrate the utilization of media queries in CSS.
In the initial example, our objective is to alter the background color to blue when the device’s width reaches 600px or less.
To achieve this, we incorporate a media query with a (max-width: 600px) declaration in the CSS. This instructs the browser to target devices with a screen width of 600px or below.
Within the media query, we modify the background styles for the body element, specifying background-color: #87ceeb;.
Here is the complete media query:
@media (max-width: 600px) { body { background-color: #87ceeb; } }
Here is the CodePen example. If you click on the Edit on CodePen in the top right hand corner, you can test this out on Codepen.
Let’s explore another example where we aim to modify the background color from blue to red when the device’s width falls within the range of 600 to 768px.
To accomplish this, we employ a media query with a (min-width: 600px) and (max-width: 768px) declaration in the CSS. This specifies that the styles inside the media query should apply to devices with a screen width between 600 and 768px.
Within the media query, we update the background styles for the body element, setting the background-color to red.
We can use the and operator to accomplish this.
@media (min-width: 600px) and (max-width: 768px) { body { background-color: #de3163; } }
Here is the complete CodePen example for you to try out:
When you test it out, you should see that the background color is blue if the width of the screen is below 600px or above 768px.
Simply put, the answer to that question is no.
Attempting to write a media query for every single device in the market would be impractical due to the vast number of devices available. Moreover, technology is continuously evolving, leading to the introduction of new devices regularly.
Instead, it is crucial to focus on targeting a range of devices using media queries. In an article by Cem Eygi on freeCodeCamp, he outlines some commonly used breakpoints for media queries, providing a helpful starting point.
- 320px — 480px: Mobile devices
- 481px — 768px: iPads, Tablets
- 769px — 1024px: Small screens, laptops
- 1025px — 1200px: Desktops, large screens
- 1201px and more — Extra large screens, TV
Conclusion
The aim of Responsive Design is to ensure that your content appears visually appealing across all screen sizes. Every element on the website, including layouts, fonts, and images, should automatically adjust to suit the user’s device.
Within CSS, media queries are employed to apply a specific set of styles based on the browser’s characteristics, such as width, height, or screen resolution.
Here is the basic syntax for a media query in CSS.
@media media-type (media-feature){ /*Styles go here*/ }
The media type is optional unless you are using the not or only logical operators. If the media type is omitted then the media query will target all devices.
I trust that you found this article valuable, and I wish you the best of luck on your CSS journey.