Fastest Way to Make Website Responsive? [closed]

问题:

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?)

回答1:

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/

回答2:

In my case I need to re-write the website from scratch because my responsive style file didnt resolve the problem.. So I rewrite my Styles using LESS and the I create a responsive stylesheet with the correct media queries like Matthew Darnell do.

I'm not familiar with Skeleton but Twitter Boostrap works fine for me.

回答3:

If you're willing to do a little brain work and migration, there's a way to install foundation on a currently existing project (specifically compass projects).

You first need to have compass installed and turn the project into a compass project. An easy way to do this is via code kit and just dragging and dropping your project folder into code kit. You can get some terminal hints via this page on the foundation website.

http://foundation.zurb.com/docs/sass.html

You'd then need to open terminal and type

cd /path-to-your-project-folder/

then type

compass install -r zurb-foundation foundation

You can try and use foundation alone on an existing application by using completely sass (no compass) but you'd have to download foundation from the git site and @include the scss one by one. You can find information in the page I've listed above.