It is required to adaptively impose a page on which there is a complex background formed by a group of images that are absolutely positioned (for example, decorative arrows positioned so as to be visually associated with different elements on the page). Of course, when the window is resized, the positioning turns out to be wrong and the layout “floats”. What are the techniques for adaptive page layout with elements whose location is explicitly specified?

    1 answer 1

    1. Use percentage positioning

    For example, the size of your section in the design is 1400px * 600px , and unit No. 1 is located in it in the coordinates of left: 100px; top 200px left: 100px; top 200px . We convert coordinates to percents:

     .section { width: 100%; height: 0; padding-bottom: (600px / 1400px * 100%); } .block-1 { left: (100px / 1400px * 100%); top: (200px / 600px * 100%); }

    With this method, all elements of your section will stretch and taper proportionally, depending on the width of the screen.

    The trick with padding-bottom needed so that the height of the section is adjusted to the variable width without disturbing the proportions.

    Also, if you use preprocessors (Less, Sass, Stylus) - you can use formulas directly in styles. Otherwise, you will have to calculate the percentages by the formulas separately, and in the styles you should specify the calculation results already.

    2. Supplement the code with @ media-requests

    This will help in cases where you need to change the layout of the elements. For example, on wide screens, a chain of steps goes in a row from left to right, and on narrow screens - in a column from top to bottom.

    For this, it would be better for you to draw separately (or request from the designer) - variants of this section for narrow (and very narrow, very wide) screens. Several variants. And you stylize each option in the same way as in paragraph 1, separating them in css @ media queries.