INTRODUCTION
CSS responsiveness is crucial in web development and design, with each CSS responsive specification iteration enhancing cross-browser compatibility. Today, responsive CSS frameworks go beyond basic styling elements, and media query CSS serves as a valuable tool for achieving mobile-first and responsive web design effortlessly. In this post, we will explore media queries in CSS, a property that allows adjustments to web pages based on device characteristics. We will discuss the evolution of media queries and focus on implementing responsive design using CSS media queries for a seamless user experience on your website.
PREREQUISITES
HTML basics (Study introduction to HTML), and an idea of how CSS works (Sudy CSS first steps and CSS building blocks).
AIM
To understand how to use media queries and the most common approach for using them to create responsive designs.
WHAT ARE CSS MEDIA QUERIES
CSS Media queries provide a means to target browsers based on specific characteristics, features, and user preferences. By utilizing media queries, developers can apply styles or execute code based on these factors. One of the most prevalent uses of media queries is to target specific viewport ranges and apply customized styles, which gave rise to the concept of responsive design.
WHY DO WE NEED CSS MEDIA QUERIES
When starting with media queries in a responsive CSS framework, it's common to question the need for them. With the evolution of CSS, especially with the introduction of CSS grids and subgrids, many standard issues in responsiveness are now addressed by new CSS concepts.
For instance, CSS grids are highly responsive and designed for larger layouts. However, they require manual coding using responsive CSS media queries to adjust the column size based on the device screen. This allows for dynamic resizing and adaptation of the layout to different screen sizes, ensuring a seamless user experience.
THE VIEWPORT METATAG
<meta name="viewport" content="width=device-width,initial-scale=1" />
In the above example, if you inspect the HTML source, you will find the following elements within the document's head section;
This element is known as the viewport meta tag, which serves the purpose of controlling how content is rendered by mobile browsers. By default, most mobile browsers inaccurately report their viewport width. To compensate for this, they render non-responsive websites with a wider viewport width (usually 980 pixels) and then shrink the result to fit the screen.
While this behavior is intended to improve the display of non-responsive sites, it poses a challenge for responsive designs. If the reported viewport width remains at 980 pixels, layouts designed for mobile devices (created using media queries like @media screen and (max-width: 600px) { }) won't be rendered as expected.
To address this issue, including a viewport meta tag, like the one shown above, informs the browser to render the content using the actual device width instead of a fixed 980-pixel width. It also sets an initial scale level for better consistency. This allows media queries to function as intended and ensures proper rendering of responsive layouts.
HOW TO WRITE MEDIA QUERIES FOR RESPONSIVE DESIGN
In CSS, media queries are implemented using the following syntax:
@media media-type and (media-feature-rule) {
/* CSS rules go here */
}
The structure of a media query consists of:
A media type: This specifies the type of media the code is intended for, such as "print" or "screen."
A media expression: This is a rule or test that must be fulfilled for the enclosed CSS rules to be applied.
A set of CSS rules: These rules will be applied if the media expression is met and the media type matches.
To implement a media query, the keyword "media" is used, followed by the media type and a connector with the media expression:
@media <media_type> connector ( <query> ) {
/* CSS rules to apply */
}
For example:
@media only screen and (max-width: 480px) {
/* CSS rules to apply */
}
In this example, the media query targets a screen with a maximum width of 480px. If a screen matching these conditions is detected, the specified CSS rules will be applied.
To apply styles only to a specific media type without any media expressions (queries), you can use the following values:
"all"
"print"
"screen"
"speech"
For instance:
@media print {
.heading {
font-size: 12px;
}
}
In this case, the CSS rule inside the media query will be applied only when printing, and it sets the font size of the heading element to 12px.
MEDIA FEATURES RULES
Achieving responsiveness in our web application requires us to determine the device size and adapt the content rendering accordingly. This is where media feature rules play a vital role. By utilizing media features, we can identify specific conditions and implement responsive CSS media queries. While there are numerous media feature rules available, let's focus on an example of the "max-width" rule for responsive design.
@media screen and (max-width: 840px) {
p {
color: red;
}
}
In this example, the media query targets a screen with a maximum width of 840px. If the device screen matches this condition, the CSS rule inside the query will be applied. In this case, it sets the color of the <p> elements to red. By using the "max-width" media feature rule, we can adjust the styling based on the available screen width, ensuring a responsive layout for different devices.
The complete code for achieving responsive design through media rules can be written as:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Media Queries</title>
<style>
@media screen and (max-width: 840px) {
p {
color: red;
}
}
</style>
</head>
<body>
<center>
<p>Checking Media Rules</p>
</center>
</body>
</html>
In this code, we have included a media rule using the @media at-rule and specified the media type as screen. The media query condition is set to, targeting screens with a maximum width of 840 pixels. Within the media query block, the CSS rule sets the color of <p> elements to red.
When the viewport width is equal to or less than 840 pixels, the specified CSS rule will be applied, resulting in the text within the <p> element being displayed in red. This demonstrates the responsiveness achieved through media queries.
Feel free to modify the code and experiment with different media queries to customize the responsive behavior based on your requirements.
ORIENTATION IN CSS MEDIA QUERIES
Detecting and adapting to the orientation of a device is crucial for achieving responsiveness in web design. Without considering the device's orientation, it can be challenging to optimize the layout accordingly. However, media queries provide a solution by allowing us to detect and respond to the device's orientation, resulting in improved responsiveness.
To implement the orientation media rule, you can use the following example:
@media (orientation: landscape) {
/* CSS rules for landscape orientation */
}
@media (orientation: portrait) {
/* CSS rules for portrait orientation */
}
By utilizing the orientation media rule, you can define specific CSS rules for both landscape and portrait orientations. This enables you to customize the styling and layout of your web application based on the device's orientation, providing a more tailored and responsive user experience.
CONCLUSION
Throughout this lesson, you have gained an understanding of media queries and how to apply them in practice to develop a mobile-first responsive design.
Now, you can further explore media queries by building upon the starting point we have provided. For instance, you might consider modifying the size of the navigation based on the detection of a coarse pointer using the pointer media feature.
Additionally, you can experiment with incorporating different components and evaluating the most suitable approach for responsiveness. This could involve adding media queries or utilizing layout methods such as Flexbox or Grid. It's important to note that there isn't always a definitive right or wrong way. By conducting experiments, you can determine which approach best suits your design and content.