IT Course CSS Basics 033_Responsive Layout

Responsive Layout

Responsive layout is a web design approach that can adapt to different screen sizes and devices. By using responsive layout, you can ensure that web pages maintain a good display effect on different devices, whether on desktop computers, tablets, or mobile phones.

Media Queries

Using CSS media queries, you can apply different styles based on device characteristics (such as screen width, height, device type, etc.). This allows you to define different layouts for different screen sizes.

Example:

1
/* PC */
2
@media (min-width: 992px) {
3
    * {
4
        background: yellow
5
    }
6
}
7
/* Tablet */
8
@media (min-width: 768px) and (max-width: 992px) {
9
    * {
10
        background: red
11
    }
12
}
13
/* Regular phone */
14
@media (min-width: 576px) and (max-width: 768px) {
15
    * {
16
        background: green
17
    }
18
}
19
/* Small screen devices */
20
@media (max-width: 576px) {
21
    * {
22
       background: blue
23
    }
24
}

Effect:

Responsive Images

Use max-width: 100%; to ensure images and media elements don’t exceed their container on small screens. Example:

1
    img {
2
      max-width: 100%; /* Image max width is 100% of its containing element */
3
      height: auto;    /* Maintain aspect ratio to prevent image distortion */
4
    }
5

6
    /* Adjust image size on small screens */
7
    @media screen and (max-width: 600px) {
8
      img {
9
        max-width: 50%; /* Image max width is 50% of its containing element */
10
      }
11
    }

1
    <img src="zhaojian.jpg" alt="Responsive Image">

Effect:

Viewport Settings

Use the <meta> tag to set the viewport to ensure the page scales correctly on mobile devices.

Example:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

This meta tag tells mobile browsers that they should set the viewport width to the device width, and scale the document to 100% of its intended size, displaying the document at the mobile-optimized size you want.

Along with the viewport meta tag, you can use several other settings, but generally speaking, the line above is what you want to use.

• initial-scale: Sets the initial zoom of the page, we set it to 1.
• height: Specifically sets a height for the viewport.
• minimum-scale: Sets the minimum zoom level.
• maximum-scale: Sets the maximum zoom level.
• user-scalable: If set to no, prevents zooming.

Avoid using minimum-scale, maximum-scale, especially setting user-scalable to no. This ensures users can zoom in and out on their own.