Use calc() to implement responsive layout

This time I will bring you how to use calc() to implement responsive layout, what are the notes of using calc() to implement responsive layout, the following is a practical case, one Get up and take a look.

REM method

calc() Literally we can understand it as a function function. In fact, calc is the abbreviation of the English word calculate. It is a new function of CSS3 and is used to specify the length of elements. For example, you can use calc() to set dynamic values ​​for the border, margin, padding, font-size, and width properties of an element. Why is it said to be a dynamic value? Because we use the expression to get the value. However, the biggest benefit of calc() is that it can be used in fluid layout. The width of the element can be calculated through calc().

calc() allows you to calculate the element. You can give a p element and calculate its width or height using percentage, em, px and rem unit values, such as "width: calc(50% + xxpx)", so that you don't have to consider the width value of element p, and leave this annoying task to the browser to calculate.

width:calc(50% + xxpx)

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of pointer-events in css3

Completely use CSS to center elements

CSS3 to make seamless carousel ads

The above is the detailed content of Use calc() to implement responsive layout. For more information, please follow other related articles on the PHP Chinese website!