When it comes to styling your website with CSS, understanding the different units available can be crucial for creating a responsive and user-friendly design. From px to rem, em, vw, vh, % and ch, each unit has its own strengths and best use cases.

For precise control, use px for border-radius or box-shadow. For font sizes, padding, and margins in layout, rem ensures consistent scaling across devices. Em is ideal for element-specific styles that adjust based on their context, while vw and vh are perfect for responsive layouts that adapt to the browser window size. % is great for layouts that need to adapt to the parent container, and ch is suitable for controlling character visibility in inputs or text areas.

By mixing these units correctly, you can create a flexible and scalable design that responds well to different screen sizes and devices. Remember to use rem for most of your layout and text sizing, em for element-specific styles, and px for precise details.

Source: https://dev.to/tomasdevs/css-units-when-and-how-to-use-them-3nj7