Responsive Design

Question

Do we have standard sizes for responsive design. Generally I thought it would be a size for mobile, tablet, iPad, laptop, desktop. But now I\'m getting into so many problems

Answer 1

Perhaps you could consider using Restive Plugin. It's built to solve your kind of challenge with building Web sites for multiple devices.

You could also check out the Getting Started with Restive Plugin blog post which provides an intro into how to use it in a real-life Web design scenario.

Full disclosure: I developed the Plugin.

Answer 2

There's no real standard sizes for responsive design. The best method is to design for your content, not for devices. And design mobile-first.

By mobile-first, the default CSS will automatically target smaller screens, and from there build up what you need for progressively larger screens.

And development wise, use @min-width(insert px) to build your stylesheet up in a mobile-first way.

Answer 3

I'm always starting with this mediaquery template:

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-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-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-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 */
}

Answer 4

If you use Bootstrap then will get a problem it will be automatic adjust in all mobile devices and resolution.

Go to this link and download bootstrap you will get bootstrap css and js file it will work in your app or web.

http://getbootstrap.com/getting-started/#download

Use it it will work properly if you need any help then ask to me

Thanks