PC pages scale layout proportionally

the width and height of pc pages change with the size of the screen

gives 1366 blueprints

Mar.16,2021

Adaptive? It still includes changes in the size of words and the like, and if it is the latter, it will be too troublesome.


in your case, it is recommended to use rem instead of px. Then use media query to control the size of the font-size value


gives 1366, that is, the minimum width satisfies 1366 screens, and if it is larger, the percentage adapts itself. Set width for specific content


I'll tell you a way to make an element square:

first, the outermost element width is full and height is adaptive; the box model of the second layer element does not need to be set to border-box, width and height. Set padding (key. The percentage of padding is calculated by the width of the root parent element). If you have n elements in a row, set padding to 50% padding n. The third layer element sets top, left, bottom and rught according to the absolute positioning of the second layer element.

so the third element is the operable space in the cube. Rectangle is the same

then you use the percentage, and it becomes adaptive


flexible layout? Using rem


can also consider the use of vw and vh . Use it with min-width , max-width . Or Grid Layout . There are usually no restrictions on height on all kinds of equipment, and the limitation in design is mainly on width. Adaptations like Bootstrap are based on media queries. If there is a big difference in the display under different widths, you need to inquire with the help of the media.

Menu