Page layout - responsive layout

Responsive layout is a website compatible with multiple terminals --- instead of doing a specific version for each terminal

@media all (for all devices) || screen (for computer screens, tablet PCs, smart phones, etc.) and | not | only (three keywords can be selected)

 1 <head>
 2 <style media="screen">
 3     @media screen and (max-width:600px){
 4       .con{
 5         background:red;
 6       }
 7     }
 8     @media screen and (min-width:600px) and (max-width:800px){
 9       .con{
10         background:blue;
11       }
12     }
13     @media screen and (min-width:800px){
14       .con{
15         background:green;
16       }
17     }
18     .con{
19       width: 100%;
20       height: 100px;
21     }
22   </style>
23 </head>
24 <body>
25   <div class="con">
26         A website is compatible with multiple terminals --- instead of doing a particular version of a website for each terminal is compatible with multiple terminals --- instead of doing a particular version of a website for each terminal is compatible with multiple terminals - - for each terminal instead of doing a particular version of a website be compatible with multiple terminals --- instead of doing a particular version of a website for each terminal is compatible with multiple terminals --- rather than for each terminal do a particular version of a website be compatible with multiple terminals --- instead of doing a specific version for each terminal
 27    </ div > 
28  </ body >

1.meta label

The simplest approach is to add a meta tag

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

Which, width = device-width meaning of this sentence is to make the page width equal to the width of the screen.

2. Use the rem

rem refers html element font-size, font-size of the html element 16px default, so that 1 rem = 16px; rem is then calculated according to the width and height of each element, and can be achieved with an adaptive media query.

3.media query

css2 allows the user to customize a particular media type styles, the basic syntax

@media screen and (max-width: 360px) {  
     html { font-size: 12px;    }
}

It means: when the screen width 360 px or less when the html font size 12 px.

There is a point to note is large scope to be on top, placed in a small range below. Suppose there are two styles, an adaptation of the following 360px, 640px an adaptation of the following, if 360px is on top, but also satisfy less than less than 360px 640px, this is not the result we want, so a wide range of needs on top.

Responsive layout

Page layout - responsive layout

Guess you like