How can computer CSS absolute positioning be displayed normally under different resolutions?

This article mainly introduces how CSS absolute positioning can display the positioning position normally on computers with different resolutions. This article first explains the common computer resolutions. In order for the page to display normally under different resolutions, a safe width must be given to the page. , and then use absolute positioning. You can check the detailed explanation below for the specific operation steps. Interested friends can refer to it. I hope it can help everyone.

Sometimes when we are writing a page, we will find that the absolutely positioned parent element has been relatively positioned, but on computers with different resolutions, the absolute positioning will still be confused. It seems that the relative positioning of the parent is not It worked.

First of all, you must understand the following principles:

1. The resolution of laptops is generally around 1366*768, and the resolution of PCs is generally 1920*1080 ;

The following are common computer resolutions:

When writing a web page, if you write it in a large resolution such as 1920, then go to a small resolution If you look at the same webpage on a high-speed laptop, you will find that the laptop displays basically a display effect of the webpage magnified to about 1.5 times on a large widescreen monitor.

2, In order for the page to display normally under different resolutions, a safe width must be given to the page. Generally, when making a 1920px wide page, there must be a safe width of about 1200px in the middle. , and centered. All content must be written in a box of this width. If there is a background image or carousel image that must cover the entire page, it must be set to center alignment, so that when the resolution is reduced, the background image or Banner image The boxes with a width of 1200 on the left and right and in the middle are still centered and will not deviate to the left or right.

Small boxes such as p in the box can be expressed as percentages to achieve page adaptation.

Use of absolute positioning:

When using absolute positioning, the parent element of the element must be set to relative positioning, so that it can be used in different situations. The positioning will not be messed up under the resolution, but the premise is that the parent element is within a safe width. If the parent element itself is an element that will change due to the lowering of the resolution, the positioning will definitely be messed up.

When laying out the page structure, some box frames are essential, such as p with a safe width of 1200px.

For example: Make an event page, where the background of this page is a large picture. On this big picture, some small pictures should be placed to position it with the big picture. The big picture must not be used directly as the background!

Instead, continue to put a safe width p in the p of the background of the enlarged image, then use it as a parent element for relative positioning, and absolute positioning for the child elements inside, so that it will not appear under different resolutions. The absolute positioning problem is confusing.

By summarizing the experience of netizens, by adding the zoom attribute, a certain section of the page can be automatically zoomed to the appropriate area according to different resolutions. However, there is a bug. Even Firefox browser does not support this attribute. , even using the transform:scale(x,y); attribute does not help. There is also a small problem. When the page is slow to load, refreshing the page will first display the enlarged effect, and then change to the reduced effect, which will flash for a while. I have not found a solution to this, and I hope friends who know more can share it.

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;

zoom attribute browser Supportability:

The result is: except for Firefox, other browsers can support the zoom attribute normally, and the entire block of the page that needs to be zoomed is scaled to suit the current resolution. , and transform:scale first displays the page as if it has enlarged the original page and then uses scale. The reduction is equivalent to the reduction effect of the current page, and both sides will naturally be left blank.

Related recommendations:

relative positioning and absolute positioning in html

detailed chart of advantages and disadvantages of css absolute positioning centering technology

Introduction and use of relative positioning and absolute positioning in css

The above is the detailed content of How can computer CSS absolute positioning be displayed normally under different resolutions?. For more information, please follow other related articles on the PHP Chinese website!