CSS tips for Responsive Web design

Crafting a responsive website can be a daunting undertaking that demands a deliberate approach to guarantee a visually appealing layout on all devices.

The growing array of devices and screen sizes presents challenges in creating a straightforward and efficient design.

Here are some of some CSS tricks and properties to creating a more responsive designs

1. aspect ratio

this css property lets you have consistent ratios of width and height for a html element in relation to its parent element or its-self

.container{
   aspect-ratio: 16/9;
}

The relationship for the element having the css class container will be the width of 16 by the height of 9

you can also set the width or height for which the aspect ratio will get its measurement from instead of getting from the parent element

.container{
   aspect-ratio: 16/9;
   width: 100px;
}

2. Use rem or em instead of px

Rem and em are relative units that adjust their size based on the font size of their parent element. This means that if the font size of the parent element changes, all child elements that use rem or em will adjust their size accordingly.

This makes it easier to create responsive designs that can adapt to different screen sizes and devices.

On the other hand, px is an absolute unit that sets the font size to a fixed pixel size. This can create issues with scalability, especially when designing for different devices and screen sizes.

Additionally, using px can make it difficult to implement accessibility features like zooming, as the font size will not adjust when the user zooms in or out.

3. min() , max() and clamp()

min()

starting of with min, it takes at-least two argument which are the desired width and the maximum width

.container{
   width: min(100px,70%);
}

the function only picks the smallest value so it doesn't care much on the placement of the arguments

the 70% is the desired width and the element wont have a width greater than 100px

# same as using min()
.container{
   width: 70%;
   max-width: 100px;
}

max()

max() works opposite to how min() works

.container{
   width: max(100px,70%);
}

# same as using max()
.container{
   width: 70%;
   min-width: 100px;
}

clamp()

clamp() takes three arguments: a minimum value, a preferred value, and a maximum value. The preferred value is the size you want to use, and the other two values set the range in which the preferred value can adjust

.container{
  font-size: clamp(16px, 3vw, 24px);
}

4. Text-overflow

You know those moments that you are trying to fit content in a div but is making one div bigger than the other divs in maybe in you flex row, well this solves that.

it adds three dots to content that is longer than the space in the parent div has

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

5. Media-query

without forgetting the big boy in responsive design,Media-query allows you adjust to different device properties, such as screen size or orientation.

here is a basic view on how they work

@media only screen and (max-width: 768px) {
  .menu {
    display: none;
  }
}

for the above example,the .menu element will be hidden on screens with a width of 768 pixels or less, allowing for a better user experience on smaller screens.

for a more deeper understanding of Media-query heres the link to the documentation

And those are some of many CSS properties that you can use for a more responsive web design