问题标签 [responsive-design]

我正在使用 Skeleton 使现有网站具有响应性，但有一件事我无法弄清楚。

如果两列彼此相邻，这看起来不错，如下所示：

但是如果屏幕更小并且列垂直堆叠，它可以堆叠，但浮动看起来不太好：

列堆叠时如何将搜索框向左浮动？

我是否需要使用 Skeleton 的媒体类型修改搜索框的浮动样式？

谢谢你的帮助。

我对媒体查询有疑问。我希望我的主div屏幕宽度为 960 像素，但如果屏幕小于 960 像素 - 我希望它是当前宽度的 80%。

我只从 960px 中得到 80%，而不是从所有更小的东西中得到 80%（例如：800px 的 80%，700px 的 80%）。

HTML：

CSS：

我希望它是流动的，但它只固定在 2 个位置：960px 和 960px 的 80% - 我如何使它流动？

为移动设备定义响应式设计的正确方法是什么。假设我想为 iPhone 4 (960*640) 和普通的 android (800 * 480) 做一个通用设计。

我应该使用媒体查询吗？

我应该考虑到一般的android设备在800px（横向模式下）而不是960px上工作吗？

因为这对我来说是全新的——问题是如何以正确的方式定义 CSS？什么是正确的范式？

我应该按特定尺寸定义它（当我有 2 个主 CSS 用于 960px 以上和 960px 时） - 还是我应该为每个设备定义它（iphone 或 android）

我了解如何通过媒体查询（例如 media="screen and (max-width:640px)"）更改 CSS

但假设我想写（例如）

我需要写什么条件才能使它正确？

我想做两件事：

1. 知道我对SEO 很友好并且我正确插入了文本（所以搜索引擎会知道这是“我的徽标”

2. 了解如何在屏幕低于特定宽度的情况下调整徽标大小（假设我知道如何使用媒体查询）

   /li>

我应该怎么做才能同时实现它们？我的 CSS 应该是什么，我是否正确编写了代码？

我正在尝试为移动设备（例如 - iphone）创建一个特殊的样式表。

我在主样式表中有一条这样的规则：

并且对于某个标题：（我所有的字体大小都在 em 中，除了定义所有的正文）

当我在我的 iphone 上看到大标题时，它看起来很小 - 我应该怎么做才能看到更大尺寸的它？我如何将规则应用于所有元素以“只是两倍大”（我尝试调整 body 的字体大小，但没有奏效）。

我做错了什么，应该如何正确完成？

我有这两条规则：

它们在我的浏览器上工作（当我调整浏览器宽度时）但是当我在我的 iPhone 上检查它们时，无论是纵向还是横向，它都会加载两个样式表。

为什么在横向视图中它加载 640px 样式表？

我整天都在试图解决这个问题，但还没有得到它：

我想要这 3 个 css 文件：

• lowerThan960pxForDesktop.css（用于流体布局）
• MobileLandscape.css（iphone 960px android 800px 等）

• MobilePortrait.css（iphone 640px android 480px 等）

• 我希望 Lanscape.css 将使用 desktop.css

• 我希望 Portrait.css 将同时使用 desktop.css 和 Landscape.css

我的 HTML 应该是什么样子才能做到这一点 - 使用媒体查询或 javascript。我已经经历了很多时间，每次出现问题时（桌面获取 mobile.css 或 iphone 读取 Portrait.css，即使它处于横向模式等）。

我希望我的 iphone 在旋转时自动缩放我的网站。

当我使用这行代码时，它可以工作：

但问题是它激活了我的纵向和横向CSS，即使它应该在横向模式下只激活一个：

当我使用这条线而不是上面的元数据时，css可以正常工作，但旋转时没有自动缩放：

问题是什么？我应该怎么办？

除了上面的元行之外，我还有这些行：

我在 iPhone 4 上测试（使用 iOS5）

是否可以使用 CSS 以弹性方式使左侧的文本字段填充右侧的所有灰色空间？