CSS Guidelines for Responsive Design

#css #design #guide #responsive #webdesign

CSS Guidelines for Responsive Design

Table of contents

No heading

No headings in the article.

Hello everyone, I hope everything is fine with you. In this piece, I'll discuss some ideas that I utilize while creating responsive websites.

  • Padding/Margin
  • Use em/rem/ percentages
  • Flex-wrap
  • Box-Sizing
  • Media query
  1. Padding/Margin: To create desktop webpages more attractive, we typically employ a lot of padding. Tablets enhance the original paddings and margins while making them responsive for mobiles.

  2. Use em/rem/ percentages: Like to use em/percentage/rem instead of px so that the text & visual dimensions make adjustments as per device width.

  3. * Flex-wrap *: Applying flexbox to align your HTML elements like as div/ p , and so on permits you to force items into one line or wrap content across multiple lines based on their width.

  4. Box-Sizing : It solves several of the difficulties padding causes; for ex - ample, utilizing box-sizing on Html tags with a 100% width takes taking padding into consideration rather than having to change the width due to padding.

    *{
             border box: box-sizing;
           }
    
  5. Media query : The media query must be used to set the width and height depending on the breakpoints. This width at which the website starts to look distorted is referred to as the breakpoint.

Please just leave any additional tips as well as tricks in the comments. Thanks a lot:)

Get in touch with me on -

  1. Github
  2. Twitter
  3. Linkedin