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.

You may also like

8 Comments

  1. Have you ever considered writing an ebook or guest authoring on other websites? I have a blog based on the same topics you discuss and would love to have you share some stories/information. I know my readers would value your work. If you’re even remotely interested, feel free to shoot me an e mail.

  2. Heya i am for the primary time here. I found this board and I to find It truly useful & it helped me out a lot. I am hoping to present one thing again and aid others such as you helped me.

  3. Heya this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML. I’m starting a blog soon but have no coding knowledge so I wanted to get guidance from someone with experience. Any help would be enormously appreciated!

  4. I do not even know how I ended up here, but I thought this post was good. I don’t know who you are but definitely you are going to a famous blogger if you aren’t already 😉 Cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *