Html 使网站响应的最快方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9917664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fastest Way to Make Website Responsive?
提问by Joe Bobby
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?)
我以前使用过 Zurb Foundation 和 Skeleton，所以我对两者都很熟悉，但我以前从未将现有网站转换为响应式网站。转换我的网站的最快方法是什么？使用上述框架，还是为已经提供的代码添加媒体查询？（这还管用吗？）
回答by Matthew Darnell
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/
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
回答by Full-Stack Software Engineer
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 LESSand the I create a responsive stylesheet with the correct media queries like Matthew Darnell do.
在我的情况下，我需要从头开始重新编写网站，因为我的响应式样式文件没有解决问题..所以我使用LESS重写了我的样式，然后我创建了一个响应式样式表，其中包含正确的媒体查询，就像 Matthew Darnell 所做的那样。
I'm not familiar with Skeleton but Twitter Boostrap works fine for me.
我不熟悉 Skeleton，但 Twitter Boostrap 对我来说很好用。
回答by Full-Stack Software Engineer
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
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.
您可以尝试通过完全使用 sass（无指南针）在现有应用程序上单独使用 Foundation，但您必须从 git 站点下载 Foundation 并逐一@include scss。您可以在我上面列出的页面中找到信息。
