Tips Front-end experience summary of media query and page height for each device's page size_html/css_WEB-ITnose

For a while, I worked on a wifi front-end project for more than a month

When it was almost finished, various small problems were repaired and some were scattered. The problem

Because the page has a background color, all pages have a background color, and some pages have a background image

The main focus is the direction of the mobile front end because now devices have various screen ratios (16: 9) Resolution (1024px_768px) and pixel ratio (devicePixelRatio)

In fact, there are many things worth thinking about when adapting to the page

The processing of page width is very convenient, you can use the percentage of html body Style or I used bootstrap with its excellent rasterization and breakpoints

I made my own plan for the page height, although in my opinion this plan still needs to be improved. For example, it did not consider the horizontal screen situation. , there are some in-depth things that can be explored in detail
But the work progress is important. You can endlessly dig up knowledge and explore in depth on one thing, but you cannot handle a project with an endless work attitude. Staying at each point, time is precious and cannot be wasted casually.

So this is what I did in the project. Use media query. Since I just set the height, I put the media query in the introduction. The css file does not use the media query method when introducing style files

Since it is a universal customization of multiple views, this part is placed in an external css file imported in the template page

 1 /*为大屏幕设备 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     10 .wrap_backgd_size{11     min-height: 580px;12 }13 14 }15     /*页面高度定制*/16 /*for iphone4 it ratio is  320x480*/17 @media all and (max-width: 330px) and (max-height: 490px) and (min-height: 470px){18     /*.testmedia{19         color: white;20     }*/21     .wrap_backgd_size{22         min-height: 485px ;23     }24 }25 26 /*for iphone 5 it ratio is 320x568*/27 @media all and (max-width: 330px) and (max-height: 570px) and (min-height: 560px){28     .wrap_backgd_size{29         min-height: 580px ;30     }31 }32 33 34 /*for iphone 6 it ratio is 375x667*/35 @media all and (max-width: 380px) and (max-height: 670px) and (min-height: 660px){36     .wrap_backgd_size{37         min-height: 680px ;38     }39 }40 41 /*for iphone6 plus it ratio is 414x736*/42 @media all and (max-width: 420px) and (max-height: 740px) and (min-height: 730px){43     .wrap_backgd_size{44         min-height: 750px ;45     }46 }47 48 /*for google nexus5 it ratio is 360x640 nexus4=384x640*/49 @media all and (max-width: 385px) and (min-width: 350px) and (max-height: 650px) and (min-height: 630px){    50     .wrap_backgd_size{51         min-height: 650px;52     }53 }

The code is posted here, you can edit it, improve it and use it immediately

note: 1. Media query for the same style The principle of rule application is that the priority of CSS style application is the same. The style written later will overwrite the previous style

　2. Naturally, use the min-height attribute to set a minimum height. Allows content to exceed the area