Adaptive Web Design/Responsive Web Design

Reference: https://www.cnblogs.com/wj601/p/5775614.html

This article does not explain what responsive web design is.

1. Allow web page width to adjust automatically

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

The viewport is the default width and height of the web page. The above line of code means that the web page width is equal to the screen width by default (width=device-width), and the original zoom ratio (initial-scale=1) is 1.0, that is, the initial size of the web page occupies the screen 100% of the area.

All major browsers support this setting, including IE9. For those old browsers (mainly IE6, 7, 8), you need to use css3-mediaqueries.js.

Two, do not use absolute width

Since the web page will adjust the layout according to the screen width, you cannot use absolute width layouts, nor can you use absolute width elements. This one is very important.

Specifically, CSS code cannot specify pixel width:

width:100px;

Only percentage width can be specified:

width:80%;

width:auto;

Three, the relative size of the font

The font also cannot use absolute size (px), but only relative size (em).

body{
     font: normal 100% Helvetica,Arial,sans-serif;
 }

The code above specifies that the font size is 100% of the default page size, which is 16 pixels.

h1{
   font-size: 1.5em;
}

Then, the size of h1 is 1.5 times the default size, which is 24 pixels (24/16=1.5).

Fourth, the flow layout (fluid grid)

The meaning of "flow layout" is that the position of each block is floating, not fixed.

.main{
    float: left;
    width: 25%;
}
.rightBar{
    float: right;
    width: 70%;
}

The advantage of float is that if the width is too small to fit two elements, the latter elements will automatically scroll to the bottom of the previous element, and will not overflow in the horizontal direction, avoiding the appearance of horizontal scroll bars.

In addition, you must be very careful when using position: absolute.

Five, choose to load CSS

The core of "Responsive Web Design" is the Media Query module introduced by CSS3.
It means to automatically detect the width of the screen, and then load the corresponding CSS file.

<link rel="stylesheet" type="text/css" media="screen and (max-device-width:400px)" href="main.css"/

The above code means that if the screen width is less than 400 pixels (max-device-width: 400px), load the main.css file.

<link rel="stylesheet" type="text/css" media="screen and (min-width:400px) and (max-device-width:600px)" href="main.css"/>

If the screen width is between 400 pixels and 600 pixels, load the main.css file.

@import url("main.css") screen and (max-device-width:400px);

In addition to loading CSS files with html tags, you can also load in existing CSS files.

Six, CSS @media rules

In the same CSS file, you can also choose to apply different CSS rules according to different screen resolutions.

@media only screen and (max-width: 400px) {
    .footer .text {
        text-align: center;
    }
}

Seven, image adaptation (fluid image)

In addition to layout and text, "responsive web design" must also implement automatic scaling of pictures.

This only takes one line of CSS code:

img{max-width: 100%;}

The old version of IE does not support max-width, so I had to write:

img{width: 100%;}

However, if possible, it is better to load pictures of different resolutions according to different sizes of screens. There are many ways to do this, both server-side and client-side.

Adaptive Web Design/Responsive Web Design

Guess you like