我可以在純CSS而不是使用jQuery做到這一點嗎？

目前，我使用jQuery在窗口大小調整事件中設置了一些元素的寬度和高度，基於window.innerWidth和window.innerHeight。我可以在純CSS而不是使用jQuery做到這一點嗎？

事情是這樣的：

$(".gr1").css("height", (window.innerHeight - 150) + "px");

而這些是其他一些例子：

$(".gr2").css("width", ((window.innerWidth/2) - 12).toString() + "px"); 
$(".box1").css("height", ((window.innerHeight - 150)/3 - 12).toString() + "px"); 
$(".box2").css("height", ((window.innerHeight - 150)/2 - 12).toString() + "px");

，這是渲染有點慢在Chrome 21（Windows）和呈現在iPad上和Nexus太慢7片。（由於存在與gr1，gr2，box1和box2類的許多元素）

我能做到這一點的純CSS，以提供更好的性能？怎麼樣？

來源

2012-09-03 Mahdi Ghiasi

請告訴我們您的DOM。元素是否獨一無二，他們已經擁有哪些風格？ – Bergi

@Bergi我的DOM很混亂，它也有很多其他的東西。無論如何，我會在幾分鐘後發佈一個鏈接。但是，爲什麼你需要DOM？ –

爲什麼一個機械師需要一輛車來看看它有什麼問題？「我的車有一個問題，這是它的描述，現在修復它！」 – Kyle

你可以嘗試使用calc()，但the support is not very good（僅限於IE9 +，FF4 +，Safari瀏覽器6時，Chrome 19+ & Android版Firefox）。

測試：http://dabblet.com/gist/3609183

來源

2012-09-03 12:54:19 Ana

它在Chrome上工作嗎？ iPad和Android平板電腦怎麼樣？ –

不可以。正如我在回答中所說的那樣，它只適用於IE9 +和FF4 +。 – Ana

看到這個鏈接：http://caniuse.com/calc，似乎Chrome也支持這一點。 –

沒有看到您的HTML或CSS我不能給你一個明確的答案，但最好的解決方案，如果你需要頁面的元素來響應被調整的瀏覽器窗口是使用％寬度，加上min-width和max-width來設置具體的尺寸限制。

來源

2012-09-03 12:51:29

如果它是'.css（「height」，（window.innerHeight/3））'，我可以使用百分比。但高度上還有一個額外的「+ 12」或「 - 150」。我如何用百分比實現這些？ –

是的，在CSS中這樣做的正常方法是創建一個流體佈局。 – feeela

你能解釋一下嗎？ –

，你可以嘗試緩存你的jQuery選擇，提高性能：

var gr1 = $('.gr1'); 
var gr2 = $('.gr2'); 
var box1 = $('.box1'); 
var box2 = $('.box2'); 
$(gr1).css("height", (window.innerHeight - 150) + "px"); 
$(gr2).css("width", ((window.innerWidth/2) - 12).toString() + "px"); 
$(box1).css("height", ((window.innerHeight - 150)/3 - 12).toString() + "px"); 
$(box2).css("height", ((window.innerHeight - 150)/2 - 12).toString() + "px");

來源

2012-09-03 12:51:37 Mark

我試過這個，但仍然很慢...它只是在我的Windows PC上有點慢，但在iPad上太慢... –

刪除toString（），使用mathRound（） – Mark

您是定義調整大小功能之外的變量？因爲如果不是你沒有做任何儲蓄...... – Pebbl

Media Queries將可能是要走的路，雖然這取決於你的「純粹」的CSS定義，媒體查詢是新的CSS3，並且不工作fully in IE 6/7/8。

如果您不知道，他們的工作方式是僅根據屏幕/設備當前分辨率應用某些樣式。您可以看到一個，調整窗口大小並查看內容如何更改？

這被稱爲responsive web design

來源

2012-09-03 12:52:41