CSS Responsive Design

CSS

Using "@media" Queries

The "@media" function is often used to define a system, where you would give it pixels and put an element into the function to do something if it reaches that state.

Its a feature implemented into alot of websites, because it simply works for responsiveness.

Typography Sizing and Spacing

Usually text is what makes divs bigger automatically, thats why creating a responsive system for your fonts is crucial to get an all-device-friendly site.

Here we again use the '@media' query to define what we want our font size to be at certain screen size. The code has set REM on fonts aswell, instead of "px" units, because in that case you would have a fixed value.

Grid Layout's Response

Grid layouts are used alot in video sites for instance, and there are places where these layouts are really common - like the site's information or services. You can get one too:

As screen gets bigger, the items break into a row.

"clamp()" for Everything

The "clamp()" function is a very powerful one for creating dynamic websites. Presented by W3Schools in 2019, this was a step forward to creating screen-size-friendly sites:

If you already don't know about this function, I'll exaplain. The first value in the brackets is the minimum size set, which defines the minimum point where the element starts growing. The second (middle) value is how it grows - the "vw" unit is best to use, since other units make the scaling weird. Lastly, the third value is for the maximum value, which indicates the ending of the element growth - there on the object can't grow anymore.

The "clamp()" Function with 4 Values

You can add another value in to the middle (unit, unit + unit, unit):

Here we added 1 more value to the feature. The "1rem" value in front of "1vw" makes the scaling much smooter than the 3-value clamp function.