如何为所有设备制作响应式网站[关闭]

Posted 2023-03-06

【中文标题】如何为所有设备制作响应式网站[关闭]

【英文标题】：how to make responsive website for all devices [closed]

【发布时间】：2012-04-12 15:28:14

【问题描述】：

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

【问题讨论】：

响应什么？您是在谈论网站性能吗？您引用有关不同事物的媒体查询。我想我们很困惑。你的问题到底是什么？

@jfriend00，网页设计中的“响应式”一词（特别是根据问题标签的“响应式设计”）是指使用 CSS 媒体查询动态调整其布局的网站，无论大小他们发现自己的屏幕。

【参考方案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/

【讨论】：

谢谢！所以这样做是让网站响应的最简单方法

是的，因为您可以将其添加到现有样式表并立即开始进行覆盖。

这是乔做的吗？你的结果是什么？我即将在客户的网站上做同样的事情，我正在尝试决定是建议他们从头开始重建 CSS（这是一个相当大的项目），还是这样做。

@MatthewDarnell：感谢您的回答。我也将在我的网站上做同样的事情。问题是我的网站是基于浮动的，意味着固定的高度和宽度，并且适用于桌面上的所有主要浏览器。这段代码也适用于我的网站。让我知道你的回复。

用 em 代替像素！！

【参考方案2】：

在我的情况下，我需要从头开始重写网站，因为我的响应式样式文件没有解决问题。所以我使用 LESS 重写了我的样式，并创建了一个带有正确媒体查询的响应式样式表，例如 Matthew达内尔。

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

【参考方案3】：

如果您愿意做一些脑力劳动和迁移，有一种方法可以在当前存在的项目（特别是指南针项目）上安装基础。

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

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

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

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

然后输入

compass install -r zurb-foundation foundation

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