About the impact of the use of scaling transform on the level and position of element dialog elements

http://t.csdn.cn/Q4Bxrhttp://t.csdn.cn/Q4Bxr

The origin of the previous article is based on the method of enlarging the page;

Later, I encountered the need to shrink the 3840 pixel page to 1920 pixels. I found that this operation still affects the position of the dialog. The zoom origin is incorrect, that is: when enlarging the center of the page, select center 0; when zooming out, you will not get the effect you want. ;

Solution:

1. Dynamically calculate the x offset of transform-origin: (3840-3324)/2/3840 Calculate the percentage

2. The default positioning method of the dialog is fixed. If you change it to flex, it will be automatically centered;

However, scaling also affects the flex layout box. The width of the box will be invalid when scaling; at this time, you need to set the properties:

flex: 0 0 3324px; Set the initial width of the box.