Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to achieve self-adaptive layout of css", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve self-adaptive layout of css" this article.

Self-adaptive layout

Adaptive layout refers to a space-occupying layout that can occupy a certain percentage relative to any size of the window. The containers with adaptive layout are calculated according to the window size, even if the size of the parent node or ancestor node changes, it will not affect the container size of the adaptive layout.

Building a self-adaptive layout is inseparable from the window scale unit. Four length units related to viewport have been added to CSS3. Over time, most browsers have good compatibility with these four length units, which is the most recommended length unit to be used in the scaling scheme in the future.

1vw represents 1% window width

1vh represents 1% window height

1vmin represents the smallest of 1% window width and 1% window height

1vmax represents the largest of 1% window width and 1% window height

The width and height of windows correspond to window.innerWdith and window.innerHeight respectively in JS. If you do not consider the compatibility of the lower version of the browser, you can kill the scaling scheme of all mobile devices with a single line of CSS code.

/ * UI width=750px DPR=2-based web pages * / html {font-size: calc (100vw / 7.5);}

The above code uses calc () to implement the dynamic calculation of font-size. Calc () is the core existence of adaptive layout, without which all dynamic computing of adaptive layout cannot be realized happily.

Calc () is used for dynamic units of calculation, and values, lengths, angles, time, and percentages can all be used as parameters. Because the calculated value after the operation is returned after the execution of the mathematical expression, a large number of manual calculations can be reduced or even unnecessary.

Calc () has no choice of food, and all measurement units can participate in the whole dynamic calculation as parameters.

Numeric values: integer, floating point number

Length: px, em, rem, vw, vh, etc.

Angle: deg, turn

Time: s, ms

Percentage:%

Although calc () is easy to use, beginners will inevitably encounter some pitfalls. Keep in mind the following features, and I believe you will be able to play calc ().

Four operations: only +, -, *, / can be used as operation symbols

Operation order: follow the order of addition, subtraction, multiplication and division, and you can use () to improve the operation level.

Symbolic connection: each operation symbol must be separated by a space

Hybrid calculation: dynamic calculation that can mix different units of measurement

The third point is particularly important, and if you fail to comply, the browser directly ignores this attribute.

The above font-size:calc (100vw / 7.5) is actually the font-size:100/750 = x/100vw dynamically calculated according to the ratio of the design drawing to the browser window.

Have you ever seen a page route jitter to the left or right during the jump due to the presence or absence of scroll bars in SPA? This makes people with obsessive-compulsive disorder very uncomfortable, and calc () can be used to solve the problem cleverly.

.elem {padding-right: calc (100vw-100%);}

The reason why padding-right is not directly declared as scroll bar width is that the default scroll bar width for each browser may be inconsistent. 100vw is the width of the window and content, so 100vw-100 is the width of the scroll bar, declaring that padding-right is used to keep the position where the scroll bar appears, so that the presence of the scroll bar will not cause the page to wobble.

With calc () as a guarantee, you can quickly implement some layouts related to window size. For example, implement a pop-up window with a window width of 50%.

.modal {display: flex; position: fixed; left: 0; right: 0; top: 0; bottom: 0; justify-content: center; align-items: center; background-color: rgba (0,0,0,0.5); &-wrapper {width: 50vW; height: 200px; background-color: # f66;}}

Of course, the use of calc () is not necessarily calculated in conjunction with window scale units. For example, the adaptive layout knows the height of some nodes, and you don't want to calculate the height of the last node manually but want it to fill the remaining space in the layout.

Selfadaption-layout {width: 200px; height: 567px; .box-1 {height: 123px; background-color: # f66;} .box-2 {height: 15%; background-color: # 3c9;} .box-3 {height: calc; background-color: # 09f }} above is all the content of the article "how to achieve self-adaptive layout of css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.