Tips for the front end of each device page size of media query and page height experience summary

For a period of one months on a WiFi front-end project

When you're done, all sorts of small problems, a bunch of fixes, some very scattered issues.

Because the page has a background color for all pages that have a background image

The main focus is on the direction of the mobile front end because now the device will have a variety of screen scale (16:9) resolution (1024px_768px) and pixel ratio (devicePixelRatio)

There's a lot to think about when it comes to the page.

The processing on the width of the page is convenient to use as a percentage of the HTML body style or I used the bootstrap with its very good rasterization and breakpoints

Page height I set a plan for myself. Although it seems to me that this package has yet to be improved, for example, without considering horizontal screen, there are some details that can be explored.
But the work schedule matters. You can go on and on and on to dig into your knowledge, but you can't use the endless work attitude to deal with a project and stay at each point, time is precious, not casually wasted.

So I did it in the project. Use media query because it's just a bit of height, so I put media queries in the introduced CSS file, not in the way media queries are introduced when you introduce a style file.

Since it is a generic customization of multiple views, this part is placed in an external CSS file introduced in the template page.

1 /*for large-screen devices PC*/2 @media All and (min-width:1020px){3 . wrap_backgd_size{4 Min-height:770px;5}6 }7 /*For tablet*/8 @media All and (max-width:800px){9     Ten . wrap_backgd_size{ One Min-height:580px; A} -  - } the     /*Page Height Customization*/ - /*For iphone4 It ratio is 320x480*/ - @media all and (max-width:330px) and (max-height:490px) and ( min-height:470px){ -     /*. testmedia{ + Color:white; -     }*/ + . wrap_backgd_size{ A Min-height:485px; at} - } -  - /*For iphone 5 It ratio is 320x568*/ - @media all and (max-width:330px) and (max-height:570px) and ( min-height:560px){ - . wrap_backgd_size{ in Min-height:580px; -} to } +  -  the /*For iphone 6 It ratio is 375x667*/ * @media all and (max-width:380px) and (max-height:670px) and ( min-height:660px){ $ . wrap_backgd_size{Panax Notoginseng Min-height:680px; -} the } +  A /*For Iphone6 plus it ratio is 414x736*/ the @media all and (max-width:420px) and (max-height:740px) and ( min-height:730px){ + . wrap_backgd_size{ - Min-height:750px; $} $ } -  - /*For Google nexus5 it ratio is 360x640 nexus4=384x640*/ the @media all and (max-width:385px) and (min-width:350px) and (max-height:650px) and ( min-height:630px){ - . wrap_backgd_size{Wuyi Min-height:650px; the} - }

The code is posted here and can be edited and made available on your own later.

note:1. Media queries apply the same rules to the same style as the CSS style is applied with the same precedence that is written in the following style that overrides the previous style

2. It is natural to use the Min-height attribute to set a minimum height that allows content to go beyond that area

Tips for the front end of each device page size of media query and page height experience summary