如何在响应式网站规模上制作特定的固定宽度 DIV 以适应智能手机屏幕？答案

【问题标题】：How can I make a specific, fixed-width DIV on my responsive website scale to fit smartphone screens?如何在响应式网站规模上制作特定的固定宽度 DIV 以适应智能手机屏幕？
【发布时间】：2013-09-11 18:47:40
【问题描述】：

我有一个响应式网站。我已经...

<meta name="viewport" content="width=device-width, initial-scale=1"/>

...在标题中。该网站不仅会自动缩小所有内容以适应智能手机屏幕。它保持了我的 DIV 的适当大小（无论是固定的还是百分比的），并且我设计了我的元素以相应地适应。

但是，在一页上，我有一个包含多个元素的交互式图表。这些是块（里面有文本），它们必须保持固定的宽度。问题是，这些固定宽度比智能手机屏幕大得多。它的宽度约为 1000 像素。

我不能基于这个 div 百分比。它必须至少为 1000 像素宽，并在每台设备上保持该尺寸。显然，这意味着它不适合智能手机屏幕。

我想做的是继续使用...

<meta name="viewport" content="width=device-width, initial-scale=1"/>

...对于我网站中的所有其他元素，除了这个 DIV。我需要缩放整个父 DIV、其子 DIV 和子 DIV 内的文本。

我已经尝试过 CSS“缩放”属性。但是，它不能正确缩放文本，并且子 DIV 的宽度似乎没有“缩放”相同。它们不对齐。

如何有条件地将元视口标签应用于除此特定的固定宽度 DIV 之外的所有内容？

【问题讨论】：

标签： mobile responsive-design zooming scale viewport

【解决方案1】：

您需要编写一个 css 媒体查询，在您的分页位置调整 div 及其嵌套元素

这是一个 css3 媒体查询模板 gist，您可以使用 https://gist.github.com/marcobarbosa/798569

或者更好的是，我会使用引导程序的响应式网格http://getbootstrap.com/2.3.2/

【讨论】：

"调整 div 及其嵌套元素" 就是这样。我无法调整它们。他们需要保持相同的宽度。我知道如何用 CSS 编写响应式代码。我网站的其余部分是响应式的。我只需要这个 div 来“不”响应，并且按原样适合屏幕。 “我会使用引导程序的响应式网格”你能解释一下吗？我将如何使用它来解决我的问题？

【解决方案2】：

免责声明：我不确定这是否是您要查找的内容，并且我没有足够的代表在评论中要求澄清，所以这里有一种可能性......

<meta name="viewport" content="width=1000" />

...其中“1000”px 是您要包含的 div 的固定宽度。通过省略“initial-scale”属性，设备应该计算出它需要为自己申请的缩放比例。

【讨论】：