The mobile phone can automatically adapt to the need to add the following sentence
(1) Declare the meta tag viewport (mobile phone adaptation)
<meta name="viewport" content="width=device-width,initial-scale=1.0>
width=device-width means the viewport width is the device width
initial-scale=1.0 indicates whether the viewport width is scaled by 1.0 and not scaled
(2) Use flow layout
Implementation method: float: left;
(3) All containers/text/images use relative size and do not use absolute size
(4) The most important principle, using CSS3 Media Query technology (emphasis)
Media: Refers to devices that browse web pages, such as screen (pc/pad/phone), print, tv
Media Query: Query the type of device currently browsing the web page, as well as different characteristics (resolution, size, hand-held orientation, etc.), and selectively execute some CSS codes while ignoring others.
#media query two ways
(1) Execute different CSS files according to media query results
<link media="screen and (min-width:768px) and (max-width:991px)" rel="stylesheet" href="pad.css" />
(2) Execute different CSS fragments according to media query results (emphasis)
@media screen and (min-width:768px) and (max-width:991px){
selector (style)
}