How does the CSS absolute location show the location of the computer at different resolutions?

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,

the resolution of PC PC is generally 1920*1080;

The following are common computer resolutions:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/8C/0B/wKioL1hgu1qgEQiwAAHKwJdfLqU657.png "title=" Qq20161226140119.png "alt=" Wkiol1hgu1qgeqiwaahkwjdflqu657.png "/>

Such a large resolution after writing, then go to the small resolution of the notebook to see the same page, you will find that the notebook display of the basic widescreen large display under the web to enlarge to 1.5

2. In order to display the page in different resolutions, to give the page a safe width, generally in the 1920px width of the page, the middle of a security width of about 1200px, and center, All the content to be written in this width box , if there is a background map or carousel diagram must be the entire page, must be set to the center alignment, so when the resolution is reduced, the background map or Banner The box with the width of the left and right is still centered and will not deviate to the left.

a small box such as a div can be expressed as a percentage to achieve page adaptability.

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 the div.

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, the Div in the background of the magnified image continues to put a security-width div, which is then used as the parent element to make the absolute positioning of the sub-elements inside, 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 of the automatic zoom to the appropriate area, but there is a bug, that is, Firefox browser killed does not support this property, that is, the use of transform:scale(x, y); properties do 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;2 $ ("#container"). CSS ({"Zoom", Zoom, "-moz-transform": "Scale" +zoom+ ")", "-moz-transform-origin": "Top Left" 5});

Zoom: Current screen resolution width/1920;

Browser support for the Zoom property:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/8C/0F/wKiom1hgvPrCB79gAAAlQm2Hj6I705.png "title=" 546363.png "alt=" Wkiom1hgvprcb79gaaalqm2hj6i705.png "/>

The result: except firefox< Span style= "font-family: ' Microsoft Jas Black '; , other browsers can normally support zoom transform : scale scale

PS: I think the zoom attribute is very good use, how not how to use it now, incredibly Firefox does not support, and it is difficult to find a solution. So can only change their own code structure, improve the rigor of the code, write high-efficient and highly compatible code, is the responsibility of every front-end bounden duty.

"NOTE: This article integrates the comments and experience of netizens"

This article is from the "Small Syria frontend" blog, please be sure to keep this source http://beileixinqing.blog.51cto.com/7540036/1886191

How does the CSS absolute location show the location of the computer at different resolutions?