How can create a responsive web design?

Responsive Design

We can develop responsive webpage by using following ways.

  1. Media queries
  2. Responsive frameworks like Bootstrap and Foundation.

Media Queries Example:

To write CSS codes for accepting in mobile view only:


@media (max-width: 767px){
//CSS declarations
}

To write CSS codes for accepting in tablet view only:


@media (min-width: 768px) and (max-width: 1024px){
// CSS declarations
}

To write CSS codes for accepting in desktop view only:


@media (min-width: 1200px){
// CSS declarations
}

Some of Device Resolutions:

  • 768px – IPad portrait
  • 1024px – Ipad Landscape
  • 375px – Iphone6 Portrait or latest mobile devices
  • 360px – Some android phones
  • 320px – IPhone5 Portarit
  • 1280, 1366+ – desktop resolutions

Responsive design using CSS Frameworks (Bootstrap / Foundation):

This is like plug and play type. They have already predefined the required classes and components for responsiveness. We can use those class names and UI components for achieving responsiveness with minimal efforts.

Continue Reading