How the absolute positioning of CSS is compatible with all resolutions

This time to bring you the absolute positioning of CSS how to compatible with all the resolution, CSS absolute positioning compatible with all the resolutions of the attention to what, the following is the actual case, together to see.

Sometimes we write the page, we will find that the absolute positioning of the parent element has been relatively positioned, but at different resolutions of the computer, absolute positioning or will be confused, it seems that the relative positioning of the parent does not play a role.

The first thing to understand is the following principles:

1, the resolution of the notebook computer is generally near 1366*768, PC computer resolution is generally 1920*1080;

The following are common computer resolutions:

When writing a Web page, if in 1920 such a large resolution after writing, and then go to the small resolution of the notebook to see the same page, will find that the basic laptop display for widescreen large-scale display of the page to zoom to about 1.5 times times the display effect.

2, in order to page in different resolutions normal display, to give the page a safe width, generally do 1920px wide page, the middle to have a security width of about 1200px, and center, all the content to write in this width box, If you have a background map or a carousel chart must be aligned to the entire page, be sure to set the center alignment, so that when the resolution is reduced, the background map or banner, the middle 1200 width of the box is still center aligned, will not appear to the left and right deviation.

The box of P and other small boxes can be expressed as a percentage to achieve page self-adaptation.

Use of absolute positioning:

Absolute positioning, the element of the parent element must be remembered as relative positioning, so that the location in different resolutions will not be chaotic, but the premise is that the parent element in a safe width, if the parent element itself is a resolution will be reduced because of the elements of the change, then the positioning will be followed by chaos.

In the layout of the page structure, some box frames are necessary, such as the 1200px security width of p.

For example: Do an activity page, where the background of this page is a large map, in this large map to put some small diagram and large map to achieve positioning, absolutely can not be a large map directly as the background!

Instead of placing a security width p in the p in the background of the magnified image, and then positioning it as the parent element, the absolute positioning of the child elements inside is made, so that there is no problem of absolute location confusion at different resolutions.

By summing up the user experience, by adding the zoom attribute, you can make the page of a block based on the resolution to automatically zoom to the appropriate area, but there is a bug, that is, Firefox browser does not support this property, that is, the use of Transform:scale (x, y), the property does not help. There is a small problem, when the page load is slow to refresh the page will first show the effect of amplification, and then become a reduced effect, will flash, this has not found a solution, I hope to understand a lot of friends to communicate.

The zoom code is as follows:

$ (function () {        var w=window.screen.width;        var zoom=w/1920;$ ("#container"). CSS ({        "zoom", Zoom,        "-moz-transform": "Scale (" +zoom+ ")", "- Moz-transform-origin ":" Top Left "      }); });

Zoom: Current screen resolution width/1920;

Browser support for the Zoom property:

The result: In addition to Firefox, other browsers can normally support the Zoom property, and the page needs to zoom to the overall scale to adapt to the current resolution of the effect, and Transform:scale is to first display the page as already the original page enlarged before using scale, The reduction is equivalent to the current reduction of the effect of the page, the two sides will naturally stay white.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!
Recommended reading:

How CSS makes 0.5-pixel lines

CSS3 Transition Smooth Transition menu bar implementation