Using flexible size instead of numerous media queries

The article considers the possibility of using a flexible size in CSS, which allows you to change the size of the font, indentation and other properties, depending on the width of Vuvport, using the CSS CLAMP function. However, the author notes that the media is still needed to change colors, boundaries, shadows and other CSS styles.

🚀 This article is an extended version of a pre -published textbook. The author discusses how to reduce the number of entries in the @Media rule by using relative VW and Vh units, Calc functions, and later MIN, MAX, CLAMP functions in CSS, which gave us many opportunities.

💡 CLAMP function is obvious. We can determine the change, for example, the size of the font in a certain range of Vuvport (screen size) and, at the same time, limit its maximum and minimal values. In such a simple case, we automatically (thanks to flip) do not require the use of media inbound to change the size at the stop points.

• 📌 The CSS CLAMP feature can replace the use of media queries to change certain CSS properties.
• 📌 The use of flexible size allows the developers to change the size of the font, indentation and other properties, depending on the width of the Vuvport.
• 📌 Media requests are still needed to change colors, boundaries, shadows and other CSS styles.