javascript - Html+css+javascript 响应式设计

Question

我想创建一个显示速度计的 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 不是很熟练，所以我想就如何实现此行为提出一些建议!

谢谢!

Answer 1

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

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