Tips front-end page size of each device media query and page height Experience summary, tipsquery

Tips front-end page size of each device media query and page height Experience summary, tipsquery

I spent more than a month on a Wi-Fi front-end project.

A bunch of small problems are fixed to solve some scattered problems.

Because there is a page, all pages have a background color, and some pages have background images.

The main focus is on the direction of the Mobile front-end because the device now has a variety of screen ratios () Resolution (1024px_768px) and pixel ratio (devicePixelRatio)

There are a lot of things worth thinking about when pages are adapted.

The processing on the page width is very convenient. You can use the percentage html body style or I use bootstrap to use it for excellent Rasterization and breakpoint.

On the page height, I have set up a solution. Although it seems to me that this solution still needs to be improved, for example, without considering the landscape screen, there are some details that can be further explored.
However, it is important for you to get rid of things to explore the progress of your work, but you cannot deal with a project with endless work attitude and stay at every point. Time is precious, it cannot be wasted.

So I used the media query in the project. Because it only sets the height, I put the media query in the introduced css file and didn't use the media query method when the style file is introduced.

Because it is commonly used to customize multiple views, this part is placed in an external css file introduced in the template page.

1/* for the large screen device 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/* Page height customization */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 iPhone 6 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: pixel px) and (min-width: 350px) and (max-height: pixel px) and (min-height: 630px) {50. wrap_backgd_size {51 min-height: pixel PX; 52} 53}

 

The code is pasted here. You can edit and improve the Code and use it out of the box.

Note: 1. The rule application principle of media query for the same style is that the priority of the css style application is the same. The style written after the style will overwrite the previous style.

 

2. Naturally, the min-height attribute is used to set a minimum height, which allows the content to exceed the region.