Use @Media Screen to achieve page adaptation

Pros: No plug-ins and no mobile themes, mobile-friendly, can accommodate a variety of window sizes. Just add the @Media Screen property to your CSS and output different styles depending on the width of your browser.

<div class="a">Ha ha aha!</div>
Copy the code

First, without styles, the font appears in black

Then add a partial style and change the text to red, 26px:

.a{
    color: red;
    font-size: 26px;
}
Copy the code

The following information is displayed:

Next, add the @Media Screen property to control the adaptive style.

Text in blue, 26px

@media screen and (max-width: 600px) {.a{
        color: blue;
        font-size: 26px; }}Copy the code

The code above shows that when the page width is less than 600px, the style of class A will look like this.

When the page is less than 600px, it looks like this:

You can also specify an interval as follows:

@media screen and (min-width: 900px) and (max-width: 1200px) {.a{
        color: purple;
        font-size: 26px; }}Copy the code

This code says: Use the following style when the width is between 900px and 1200px. The effect is as follows: