HTML + CSS + javascript响应式设计

我想创建一个显示速度计的html页面。所以，我有一个背景图像（速度表），里面有一些其他图像的按钮。每个按钮由带有内IMG的标签：HTML + CSS + javascript响应式设计

<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，所以我想就如何实现这种行为提出一些建议！

谢谢！

来源

2014-01-18 user3098549

只看这段代码不能说太多，但有几种方法可以这样做。您可以像您说的那样使用相对值，根据每个按钮与主速度计相比的宽高比。但是您也必须考虑此页面中的其他元素。另一种方法是使用@media查询并分解成几个屏幕宽度，您的目标，1080p，720p等。 – Godinall

http://stackoverflow.com/questions/19827917/responsive-designing-with-javascript?rq=1 –

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

使用media queries。它们基本上是根据当前设备宽度声明CSS规则的一种方式。所以你必须通过并为你想要支持的每个宽度定义一个CSS规则。这是CSS3的一部分，可能需要包含几个js库来支持旧版浏览器。如果你走这条路线，还包括一个CSS重置的好主意。
使用框架，如Twitter Bootstrap。这基本上是一个框架，完全符合我在＃1中列出的内容。他们提供了很多非常有用的预定义的CSS类和最小的JavaScript来启用您描述的渲染类型。

来源

2014-01-18 16:35:48 Dave

HTML + CSS + javascript响应式设计

回答

相关问题