5 useful CSS tips for responsive design

Posted on Updated on

In the past few years, responsive web design, or RWD, has been steadily gaining steam in the development world. With the explosion of mobile devices, tablets, notebooks, e-readers, and more, responsive design becomes ever more relevant.

In today’s post, we bring 5 useful CSS tips to consider for responsive design.

 

  1. Media Queries. Media Queries are your friend. Use as many of these in your css as you need to. I used to think that I should have some sort of limit to using these, but I realized depending on site design, if you need 10 different Media Queries to make your site shift smoothly – then by all means, use 10.
  2. Auto. Whenever I’m using a percentage width on an element, usually an image, but I don’t want to distort the image, I’ll make sure to put the height at auto. This keeps the image in proportion with its percentage width. And if you ever want to keep the image from getting too large or small with height or width, this is where max-width/height comes in handy.
    .my-img { width: 100%; height: auto; }
  3. Min-height/max-height, min-width/max-width. Once you know you’re minimum and maximum sizes, depending on what platforms/browsers your site is for, you’ll be using these a lot to keep elements from getting too large or too small.Some elements work great at being at 100% width, like a banner, but at some point, this can get heavy as you would need a pretty large image to ensure that this would resize smoothly on all screen resolutions – which is why restricting sizes are handy. It would also help to make your max and min sizes a class for easy application site-wide.
    <div class=“container”>
    <img src=“images/my_img_a.jpg” class=“max-min” />
    <img src=“images/my_img_b.jpg” class=“max-min” />
    <img src=“images/my_img_c.jpg” class=“max-min” />
    <img src=“images/my_img_d.jpg” class=“max-min” />
    </div>
    .container { width: 600px; }
    .container img { width: 25%; height: auto; }
    .max-min { max-width: 150px; min-width: 75px; }
  4. Box-sizing. When I discovered this, my mind was blown. Using box-sizing on anything with a percentage width will take padding into account rather than having to adjust the width due to padding. Of course, this only works best on mobile or any browser that supports CSS3.
  5. Overflow: hidden. I don’t just use this for responsive design, but it’s such a handy trick to have. Instead of using clearing divs, I can clear containers by just applying an overflow of hidden on them. I like to make this a class for easy application as well, and it’s so much cleaner than inserting an extra div for clearing.
    <div class=“container overflow-hidden”>
    <img src=“images/my_img_a.jpg” class=“max-min” />
    <img src=“images/my_img_b.jpg” class=“max-min” />
    <img src=“images/my_img_c.jpg” class=“max-min” />
    <img src=“images/my_img_d.jpg” class=“max-min” />
    </div>
    .overflow-hidden { overflow: hidden; }
    .container img { float: left; }

What are your favorite CSS tips for responsive design? Share them below.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s