在 Rails 中根据屏幕大小和浏览器窗口大小更改网站布局答案

【问题标题】：Changing website layout based on screen size and browser window size in Rails在 Rails 中根据屏幕大小和浏览器窗口大小更改网站布局
【发布时间】：2013-08-18 02:04:44
【问题描述】：

我有一个在 1200 像素（大桌面）屏幕上运行的网站。现在我希望它适用于不同的屏幕尺寸和浏览器窗口尺寸。

问题：当我减小屏幕尺寸时，我网站上的一些选项卡变得不可见。

我们如何在 Rails 中做到这一点。我搜索并发现 CSS-media 是唯一的方法。这样我们必须为每个屏幕尺寸编写不同的 css 文件。在rails中有没有一种有效的方法来做到这一点？ .如在不改变CSS文件的情况下，元素的大小会根据屏幕大小动态变化？

谢谢！

【问题讨论】：

您始终可以使网站流畅（也就是具有百分比的宽度、填充、边距而不是固定像素），这样可以大大减少媒体查询的使用。
为什么你会混淆你的样式表和轨道使用媒体查询会帮助你.. :)

标签： css ruby-on-rails ruby-on-rails-3.1

【解决方案1】：

我认为 Twitter bootstrap 是一种创建响应式网站的简单方法。

这是Twitter bootstrap gem for Rails。

这是Basic tutorial (Railscasts)。

所以你可以按照教程开始，当你了解它的工作原理后，你可以提前做。

【讨论】：

【解决方案2】：

这可能会解决您的问题..但是我不确定，但试一试不会有什么坏处... 这将根据您的设备大小调整您的网站大小。

<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

在HEAD标签之间添加这些

【讨论】：