95th section, mobile fluid layout and responsive layout summary

Summary of mobile fluid layout and responsive layouts

Width and height

The width of the block width is generally defined by the Max-width maximum width and percentage, because auto-scaling is achieved

Height if you want to adapt, you don't need to define a height or define a minimum height

Note: Use percentages as far as possible, such as margins, etc.

Picture Adaptive

Guaranteed to be smaller than the image resolution of the phone, adaptive equal width screen

The picture must be able to adapt the proportional scaling to ensure the correctness of the layout.

Method: Convert the IMG tag of the image to a chunk and set the maximum width to 100% so that the image will adapt.

img {    display: block;     max-width: 100%;}

Media Enquiry

Mobile Site General Media query is to control the font size

Responsive websites, media queries to control font size, width height, and block hiding

Media query is a mobile site and an important part of the adaptive site, media queries can be based on different screen size, response processing, such as the size of the text, block hiding and so on

    /*media query, greater than 480 less than 640*/@media (min-width:480px) and (max-width:640px){#tour H2 {font-size:. 26rem; }#tour H3{font-size:. 16rem; }#footer{font-size:. 14rem; }     }     /*media query, less than 480*/@media (max-width:480px){#tour H2 {font-size:. 18rem; }#tour H3{font-size:. 14rem; }#footer{font-size:. 12rem; }     } 

95th section, mobile fluid layout and responsive layout summary