`@media` and Responsive Design
This article explains @media and responsive design.
You will learn how to create flexible layouts through the basic syntax and usage examples of @media.
YouTube Video
HTML for Preview
css-responsive-media.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-responsive-media.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Responsive Design</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>@media</h2>
20 </header>
21 <article>
22 <h3>@media Syntax</h3>
23 <section>
24 <header><h4>CSS</h4></header>
25<pre class="sample">
26@media media-type and (condition) {
27 /* Styles applied when the media query is matched */
28}
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>@media Example : max-width</h3>
34 <section>
35 <header><h4>CSS</h4></header>
36<pre class="sample">
37@media screen and (max-width: 600px) {
38 body {
39 background-color: lightblue;
40 }
41 p {
42 font-size: 14px;
43 }
44}
45</pre>
46 </section>
47 </article>
48 <article>
49 <h3>@media Example : orientation</h3>
50 <section>
51 <header><h4>CSS</h4></header>
52<pre class="sample">
53@media screen and (orientation: landscape) {
54 body {
55 background-color: lightgreen;
56 }
57}
58</pre>
59 </section>
60 </article>
61 <article>
62 <h3>@media Example : min-width & max-width</h3>
63 <section>
64 <header><h4>CSS</h4></header>
65<pre class="sample">
66@media screen and (min-width: 768px) and (max-width: 1024px) {
67 body {
68 background-color: lightgray;
69 }
70}
71</pre>
72 </section>
73 </article>
74 <article>
75 <h3>@media Example : devices</h3>
76 <section>
77 <header><h4>CSS</h4></header>
78<pre class="sample">
79/* Mobile styles */
80@media screen and (max-width: 600px) {
81 body {
82 font-size: 14px;
83 }
84}
85
86/* Tablet styles */
87@media screen and (min-width: 601px) and (max-width: 1024px) {
88 body {
89 font-size: 16px;
90 }
91}
92
93/* Desktop styles */
94@media screen and (min-width: 1025px) {
95 body {
96 font-size: 18px;
97 }
98}
99</pre>
100 </section>
101 </article>
102 </main>
103</body>
104</html>@media Rules
@media is a rule for using CSS media queries to apply styles based on specific conditions. This allows different CSS to be applied according to device screen size, orientation, resolution, or other characteristics. Mainly used for responsive design, it helps adjust the appearance on different devices such as desktops, tablets, and mobiles.
Basic Syntax
1@media media-type and (condition) {
2 /* Styles applied when the media query is matched */
3}- In
media-type, specify the type of media (e.g.,screen,print). - In
condition, specify conditions like screen size or resolution.
Media Types
- screen: Styles for screen display, such as on computers and smartphones.
- print: This is the style applied for printing.
- all: This is the style applied to all media.
Commonly Used Conditions
- min-width / max-width: Apply styles according to the minimum/maximum width of the screen.
- min-height / max-height: Apply styles according to the minimum/maximum height of the screen.
- orientation: Specify the screen orientation (
portraitfor vertical,landscapefor horizontal). - resolution: Apply styles according to the screen resolution (e.g., DPI).
Example Usage
Style changes based on screen width
For example, to specify styles applied when the screen width is less than 600 pixels, you can write it like this:.
1@media screen and (max-width: 600px) {
2 body {
3 background-color: lightblue;
4 }
5 p {
6 font-size: 14px;
7 }
8}- On devices with a screen width of 600px or less, the background color changes to light blue and paragraph font size becomes 14px.
Styles based on screen orientation
To apply styles when the device is in landscape orientation, you can write it like this:.
1@media screen and (orientation: landscape) {
2 body {
3 background-color: lightgreen;
4 }
5}- When the screen is in landscape mode, the background color becomes light green.
3. Example of combining multiple conditions
You can combine multiple conditions with and to apply styles to more specific conditions.
1@media screen and (min-width: 768px) and (max-width: 1024px) {
2 body {
3 background-color: lightgray;
4 }
5}- If the screen width is between 768px and 1024px, the background color changes to light gray.
Application Example: Responsive Design
1/* Mobile styles */
2@media screen and (max-width: 600px) {
3 body {
4 font-size: 14px;
5 }
6}
7
8/* Tablet styles */
9@media screen and (min-width: 601px) and (max-width: 1024px) {
10 body {
11 font-size: 16px;
12 }
13}
14
15/* Desktop styles */
16@media screen and (min-width: 1025px) {
17 body {
18 font-size: 18px;
19 }
20}In responsive design, it is common to apply different layouts depending on the screen width.
- Font sizes change on mobile (600px or less), tablet (601px to 1024px), and desktop (1025px or more).
Summary
@media is a powerful tool for switching CSS styles according to devices and screen sizes, and is essential for responsive design. By skillfully using conditions like min-width and max-width, you can create a website optimized for various devices.
You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.