Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "css absolute positioning how to display the positioning position normally on the computer at different resolutions". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First of all, we should understand the following principles:

1. The resolution of notebook computers is generally around 1366 to 768, while that of PC computers is generally 1920 to 1080.

The following are common computer resolutions:

When writing a web page, if you write a large resolution like 1920, and then go to a notebook with a small resolution to look at the same web page, you will find that the laptop display is basically magnified to about 1.5 times the display effect of the web page under the wide screen and large display.

2. In order for the page to display normally at different resolutions, give the page a safe width. Generally, when you do a 1920px-wide page, there should be a security width of about 1200px in the middle, and it should be centered. All the content should be written in the box of this width. If you have a background image or a webcast map that must run through the whole page, be sure to set it to center alignment, so that when the resolution is reduced. The 1200-width box on the left or right side of the background or Banner image is still centered and will not deviate from left to right.

Small boxes such as div in the box can be expressed as a percentage to achieve page adaptation.

The use of absolute positioning:

When absolute positioning, the parent element of the element must be set to relative positioning, so that the positioning at different resolutions will not be confused, but only if the parent element is within a safe width. If the parent element itself is an element that will change due to the decrease in resolution, the positioning must follow.

When laying out the page structure, some box frameworks are essential, such as div with 1200px security width.

For example: make an activity page, in which the background of the page is a big picture, put some small pictures on this big picture to achieve positioning with the big picture, absolutely can not use the big picture directly as the background!

Instead, continue to put a safe width div in the div of the enlarged image background, and then relative position it as the parent element, and absolutely position the child elements in it, so that there will not be the problem of absolute positioning confusion at different resolutions.

By summing up netizens' experience, by adding the zoom attribute, you can make a certain block of the page automatically zoom to the appropriate area according to the resolution, but there is a bug, that is, the Firefox browser does not support this attribute, that is, using transform:scale (XQuery); the attribute does not help. There is also a small problem, when the page loads slowly, refreshing the page will first show the magnified effect, and then become the effect after zooming out, will flash, this has not found a solution, I hope friends who understand it will communicate more.

The zoom code is as follows:

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 is: in addition to firefox, other browsers can normally support the zoom attribute, and the page needs to be zoomed in the area as a whole to adapt to the current resolution of the effect, while transform:scale is first displayed as the original page has been magnified and then use scale, then the reduction is equivalent to the current page under the zoom out of the effect, both sides will naturally be left blank.

This is the end of the content of "css absolute positioning how to display the positioning position normally on the computer at different resolutions". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.