css

Responsive Web Design Basics

Leave a comment

Definition

Quick and Dirty definition: Responsive Web Design allows your website to look good on whatever device you’re viewing it from whether it be your computer, tablet or phone. It is usually done using (but not limited to) HTML and CSS.

3 Useful Tricks

We’ll refer to the sample below

<meta name="viewport" 
 content="width=device-width, initial-scale=1.0">
<html>
  <style>
    #divHello{ font-size:20vh;}
    #divWorld{ font-size:25px;} 
      
    @media only screen and (max-width: 600px){
    /* For phones */
    
    #divWorld{
      text-align:center;
      width: 100%
     }
   }
  </style>
  <body>
   <div id="divHello">Hello</div>
   <div id="divWorld">World</div>
  </body>
</html>

Here are some useful tricks that you can do, obviously on top of the usual width = 100%, min-width, max-width and strategically placing your components.

The Viewport meta tag

Viewport tells the browser how to control the page’s dimensions. 10px looks much much smaller on your phone than on your computer. The Viewport tag tells your browser to scale the page based on how wide your device is.

  • A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling.
  • The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
  • The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Vh, Vw and Vmin and Vmax

These units scale to the size of your viewport.

  • vw: 1/100th viewport width
  • vh: 1/100th viewport height
  • vmin: 1/100th of the smallest side
  • vmax: 1/100th of the largest side

Looking at the sample above, line divHello tells you to scale to the height. Running this HTML and resizing your browser height will resize the font size on the fly. Resizing your browser’s width will do nothing.

If you choose vmin, it will choose the smaller of the viewport width and height. Vmax will choose the larger.

Media Queries

CSS3 Media Queries defines which CSS to change or add when the device falls on the defined min-width or max-with. In the sample above, you’ll notice that making the browser’s width smaller forces divWorld to 100% width.

Take note that you can add in multiple queries. For instance, you can have a CSS based on a specific device in mind. Here’s a reference

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
 
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
 
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
 
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
 
/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
 
/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
 
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
 
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
 
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

 

Added References:

https://en.wikipedia.org/wiki/Responsive_web_design
http://www.w3schools.com/css/css_rwd_viewport.asp
https://paulund.co.uk/understanding-the-viewport-meta-tag