Question

之前我使用过Zurb Foundation和Skeleton所以我对这两者都很熟悉，但我之前从未将现有网站转换为响应式网站。什么是转换我的网站最快的方法？使用上面的框架，或为已经提供的代码添加媒体查询？（这甚至有效吗？）

Answer 1

确定您要支持哪些设备，然后添加样式表，其中包含以下内容：

/* =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 */
       [...]
}

最简单的方法是测试它们是否按降序排列。更多示例媒体查询：

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

Answer 2

在我的情况下，我需要从头开始重新编写网站，因为我的自适应样式文件无法解决问题。所以我使用LESS重写我的样式，并使用正确的媒体查询创建响应式样式表像Matthew Darnell那样。

我不熟悉Skeleton，但Twitter Boostrap对我来说很好。

Answer 3

如果您愿意做一些大脑工作和迁移，可以在现有项目（特别是指南针项目）上安装基础。

首先需要安装罗盘并将项目转换为罗盘项目。一种简单的方法是通过代码工具包，只需将项目文件夹拖放到代码工具包中即可。您可以在基金会网站上通过此页面获取一些终端提示。

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

然后您需要打开终端并输入

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

然后输入

compass install -r zurb-foundation foundation

您可以使用完全sass（无指南针）在现有应用程序上单独尝试使用基础，但您必须从git站点下载基础并逐个@include scss。您可以在我上面列出的页面中找到信息。

最快的网站响应方式？

3 个答案: