Scaling CSS相對於窗口

只是想知道他們是否有更高效的方法來做到這一點？Scaling CSS相對於窗口

$(window).resize(function()                 
{                        
    $('.title').css('font-size',Math.floor($(window).width()*0.2)+'px');       
    $('.title').css('background-size',Math.floor($(window).width()*0.5)+'px');     
    $('.title').css('padding',($(window).width()*0.1)+'px 0px '+($(window).width()*0.1)+'px'); 
}); `

我這樣做是爲了讓我的網站applicatiion（科爾多瓦/ PhoneGap的），以對所有設備正常調整。我已經嘗試過使用視口，並且混合了結果，尤其是當它使文本相對於dpi和屏幕尺寸縮放時。

來源

2013-11-23 Joshua Barnett

有幾種方法可以做到這一點。有一些預製庫，如BootStrap用於移動視圖。

您可以使用百分比，而不是通過jquery修改css。

對於一些幫助一個很好的CSS教程網站是w3Schools css教程頁面。

每個結果都有不同的結果。

現在在你的示例代碼使用的是window.width* 0.5或window.width/2這是一半。如果您在根元素中沒有寬度設置，則可以使用50％而不是像素來輕鬆實現要查找的效果。

然而，它很可能不是那樣的。您可能必須指定父元素的寬度才能達到此目的。

來源

2013-11-23 22:02:28 CoasterChris

這個答案沒有考慮到你有問題的科爾多瓦庫的使用。我不知道這個圖書館，所以我很抱歉地說，但我不知道是否有通過該圖書館的等效解決方案。但是，根據你如何開發你的html，css百分比的使用實際上很簡單。 – CoasterChris

這對'background-image'很有效，但是'font-size'這樣的東西呢？ –

百分比將使用瀏覽器的默認字體寬度與應用到它的百分比，如果我正確讀取此.. http://www.w3schools.com/css/css_font.asp 這應該解釋字體一點。字體可能有點不同。嘗試@media css代碼也可能是最好的，因爲另一個答案已經提出了字體大小。 BootStrap庫使用它。 – CoasterChris

你有沒有考慮過使用css @media。它更整潔，並且不需要JavaScript事件被觸發。

更多信息可以在這裏 http://www.w3schools.com/css/css_mediatypes.asp

來源

2013-11-23 22:07:46 ProllyGeek

這是否將我的元素與屏幕尺寸完全成比例？ –

確實，只要你定義這些elemetns css對應於每個分辨率，就像是說if（當前分辨率==「無論」）{加載下面的css（）;} – ProllyGeek

發現可以使用@media查詢爲服務宗旨。

來源

2014-02-15 07:19:04 UjjawalKr

Scaling CSS相對於窗口

回答

相關問題