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響應式設計

回答

相關問題