When the page is zoomed, how to solve the problem of style collapse?

Problem Description:

        I wrote a vue project by myself. Since I just entered the industry, it took a long time to find the problem. Maybe this is the pitfall I have to step on when I just entered the industry. Anyway, the mistakes I encountered are definitely impressive. Yes, you should remember how to deal with similar problems in the future.

        Back to the topic, the title is the problem I encountered. When the page is shrunk, you will find that the elements are shrunk to the upper left corner, which directly leads to the collapse of the style. The original one left and one right elements, the distance will change after shrinking rather than maintaining the relative distance between the two. But most websites shrink the entire page to the middle when zooming (you can try csdn, as well). Leaving aside the enlargement of the page, this problem is generally not encountered. If it is enlarged, the general effect is to keep the original page unchanged, but there is an extra progress bar. At that time, I also consulted a lot of information, Baidu, Google, searched for a long time and found no satisfactory solution, but the solutions to the problems on the Internet are nothing more than one:

        Put a layer of div on the outermost layer of your crashed element, and then set the style for this parent div: margin: 0 auto; that is, to center the content in this div. When the page shrinks, the content will be centered Zoom out, similar to the following effect:

     

Solution:

        As for the solution, the code may be regarded as the company's secret, so I won't post it in detail. I can give you a general idea:

        1. First of all, if only positioning is used, the relative distance between the two will definitely not be maintained when the page is zoomed out, and the style will definitely collapse when zoomed in.

        2. You can try to set the flex layout for the parent elements of these two elements (or many, depending on your own interface), and then set a few lines of code common to flex:

         3. The relationship between the content you need to display and the parent element is roughly as follows:  

<div class="这里是父div">
    <div class="这里是你需要中部居左的内容">
        <!--左半边div的内容-->
    </div>
    <div class="这里是你需要中部居右的内容">
        <!--右半边div的内容-->
    </div>
</div>

        4. Finally, your elements may be squeezed in the middle. At this time, it is best to use relative positioning to position the divs on the left and right, because the space of relative positioning itself is still standing and will not be separated. The document flow does not affect the layout of other elements.

        5. After you adjust it, go to zoom the browser, and you will be surprised to find that the style is not collapsed, no matter whether it is zoomed out or zoomed in, the distance between the two remains the same!

        I hope this blog can help you who are watching! ! !