In this post, we will learn about those 5 tips of CSS which is responsible for responsive design. This can prove to be very helpful for you. Every developer should know about it.


So let's know what are those 5 tips and how will they help us to make responsive design :


5 CSS Tips For Responsive Designs


1. Padding/Margin

Padding and margin play an important role in building any website. We often use different margins and padding for the desktop and mobile versions of the website so that the website can perform well on mobile and desktop devices.


Best practice is to reduce the existing padding and margin to make the website responsive for mobile and tablet.



2. Media queries

Media queries are a very important property of CSS. Through this, we are able to decide how our website will look at different widths and heights. For this we use various break points which help us to make the website responsive for almost every device.



3. Em/Rem/Percentages

To make website responsive always try to use em/percentage/rem instead of px, so that the text, images size adjust with respect to the device width.



4. Box-Sizing

The CSS box-sizing property allows us to include the padding and border in an element's total width and height. It resolves a lot of problems padding causes, using box-sizing on HTML elements with a percentage width will take padding into account rather than having to adjust the width due to padding.



5. Flex-wrap

Using flexbox to align our HTML elements provides the force elements onto one line or can wrap onto multiple lines according to their width. So this is important property to make design responsive.



Hope the above given CSS tips will help you in creating responsive design and you will always keep these tips in mind.



You also read this

Post a Comment

Previous Post Next Post