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

This article mainly introduces the common precautions of using css to make adaptive layout. It is very detailed and has a certain reference value. Friends who are interested must read it!

The most common solution to make an adaptive layout is to use js to obtain the width and height and then calculate it when the page is initialized. Or box-sizing. But when exposed to clac (), it turns out that implementing adaptation can be so simple. Let's take a look at the common problems and notes of calc ().

1. What is calc ()?

In fact, calc is the abbreviation of the English word calculate (calculation). It is a new feature of css3 to specify the length of an element.

What can 2.calc () do?

To put it bluntly, calc () provides calculations for the dom element, calculating the width and height that meet the criteria by using percentage, em, px, rem and other unit values of length or pixels. In this way, the problem of adaptation can be left to the browser to calculate. Coupled with the use of the box-sizing attribute, a perfect layout can be achieved.

The usage and rules of 3.calc ()

Calc () uses ordinary mathematical expressions in parentheses, such as addition, subtraction, multiplication and division. Numeric values can use almost all units of length. However, if an element with a fixed layout is not used, it cannot be calculated using a percentage because of its variable height.

4. Grammatical considerations

Use the addition and subtraction operator in the expression. The operator must have spaces on the left and right sides, otherwise an error will be reported. For example: width:calc (50%-10px). The multiplication and division operator may not require spaces, but in order to standardize, it is recommended to add spaces around the same as the addition and subtraction operators.

5. Browser compatibility

The attribute calc () is supported by 90% of PC browsers on the market. IE9+, FF4.0+, Chrome19+, and Safari6+ are all perfectly compatible, but browsers with different kernels need to be preceded by browser vendor identifiers. However, it is not ideal on the mobile side, so it is recommended for products that operate frequently in pc, such as financial systems and erp systems.

The above is all the contents of the article "what are the common considerations for using css to make adaptive layouts". Thank you for reading! Hope to share the content to help you, more related 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.