Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Fastest Way to Make Website Responsive?

Fastest Way to Make Website Responsive?

Problem

I've used Zurb Foundation and Skeleton before so I'm familiar with both but I never had to convert an existing website to a responsive website before. Whats the quickest method to convert my website? Using a framework like above, or adding Media Queries for the code already provided? (Does that even work?)

Problem courtesy of: Joe Bobby

Solution

Determine which devices you want to support and then add a stylesheet with something along these lines:

/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) {
       /* Smaller Resolution Desktops and Laptops */
       [...]
}
@media (max-width: 650px) {
       /* Smaller devices */
       [...]
}
@media (max-width: 450px) {
       /* Even Smaller devices */
       [...]
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
       /* Even Smaller devices */
       [...]
}

It's easiest to test if they go in descending order. more example media queries here:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Solution courtesy of: Matthew Darnell

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Fastest Way to Make Website Responsive?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×