Sometimes we write a page, you will find absolutely positioned parent element has a relative positioning, but in a different resolution computers, absolute positioning will still confusion, it appears to be relatively positioned parent has not played a role.
Laptop resolution is generally 1366 near 768, PC computer's resolution is generally 1920 1080;
this link is a common computer resolution:http://blog.csdn.net/liyuanbh...
When writing web pages, if after such a big 1920 written resolution, the resolution go small notebook to see this same page, you will find basic notebook computer display about the next big widescreen display pages enlarged to 1.5-fold Display of results.
Solution:
1. Security Width:
In order to properly display the page at different resolutions, to give a secure page width, typically do 1920px wide page, the intermediate safety have a width of about 1200px, and centered, all write the contents of this box in width, if necessary, when the entire page banner or background FIG rotation, must be set to center alignment, so that when the left and right after the reduced resolution, or Banner FIG background, the width of the intermediate 1200 box is still centered, will not deviate from left to right.
Box and other small div box can be expressed as a percentage, to achieve adaptive page.
In the layout page structure, when a number of box containers is essential, such as security div 1200px width.
For example: do an activity page where the page background is a big picture on the big picture to put some small plans to achieve positioning and big picture, big picture absolutely can not be directly used as background!
But in the enlarged view of the background of the div continue to put a security div width, then do it as a parent element relative positioning, to the child elements inside do absolute positioning, so there is no confusion at different absolute positioning resolution of the problem .
2. The use absolute positioning:
absolute positioning when the parent element of the element must remember to set the relative positioning, so positioned as not disturbed in different resolutions, but the premise is in a safe inside the width of the parent element, If this is a parent element in itself because of the resolution and reduce the element changes, the positioning will be followed by chaos.
3. zoomproperty or transform：scale(x,y)
by summing up the experience of users, by adding the zoom property, you can make the page a block to automatically scaled to fit the different regions according to the resolution, but there is a bug, Firefox is killing not support this property, that is, use transform: scale (x, y) ; attribute does not help. There is also a small problem, when the page loads slow reload the page will be displayed before amplification effect, and then into the effect of the reduced, will flash, this have not found a solution, I hope my friends understand more exchanges.
zoom code is as follows:
$(function(){
var w=window.screen.width;
var zoom=w/1920;
$("#container").css({
"zoom",zoom,
"transform":"scale("+zoom+")"
});
})
The result: In addition to the firefox, other browsers can properly support zoom attributes, and the page as a whole need to be scaled blocks scaled to adapt to the effects of the current resolution, and transform: scale is the first page displayed as the original page has been amplified then use the scale, the equivalent of shrink-down effect of the current page, both sides will naturally be left blank.
PS: I feel very good use of the zoom property, how now is not how to use it, but still does not support firefox, and it is difficult to find a solution. We can only take to change their code structure, improve the rigor of the code, and write efficient high-compatible code, the front end is the responsibility of every obligatory.
[This article summarizes the views and experiences of users integrate income]