Html+css+javascript 响应式设计答案

【问题标题】：Html+css+javascript responsive designHtml+css+javascript 响应式设计
【发布时间】：2014-01-19 00:35:48
【问题描述】：

我想创建一个显示速度计的 html 页面。所以，我有一个背景图像（速度计），在其中我有一些按钮是其他图像。每个按钮都由一个带有 img 的标签组成：

<div id="speedometer">
    <a href="button1"> <img id="img1" src="..."/></a>
    <a href="button2"> <img id="img2" src="..."/></a>
    <a href="button2"> <img id="img2" src="..."/></a>
</div

因此，使用固定位置设置每个元素的样式很容易，以便每个对象都能很好地定位。

但我的目的是拥有一个可动态调整大小的速度计。所以，我想到的第一件事就是将“速度计”的大小动态设置为屏幕宽度的100%，然后为里面的三个按钮的位置找到合适的百分比。我认为这应该可行，但我不确定这是否是最好的方法！

由于我对 html/css/javascript 不太熟练，我想就如何实现这种行为提出一些建议！

谢谢！

【问题讨论】：

光看这段代码不能说太多，但是有几种方法可以做到。您可以使用您所说的相对值，基于每个按钮与主速度计相比的纵横比。但是您也必须考虑此页面中的其他元素。另一种方法是使用@media 查询并分解为您定位的几个屏幕宽度，1080p、720p 等。
stackoverflow.com/questions/19827917/…

标签： javascript html css responsive-design

【解决方案1】：

解决这个问题的两种方法。

使用media queries。它们基本上是一种基于当前设备宽度声明 CSS 规则的方式。所以你必须为你想要支持的每个宽度定义一个 CSS 规则。这是 CSS3 的一部分，可能需要包含几个 js 库来支持旧浏览器。如果你走这条路，包括一个 CSS 重置也是一个好主意。
使用类似Twitter Bootstrap 的框架。这基本上是一个框架，它完全按照我在 #1 中提出的内容。它们提供了许多非常有用的预定义 css 类和最少的 javascript 来启用您所描述的呈现类型。

【讨论】：