將CSS尺寸調整爲特定的移動屏幕

我使用JavaScript改變爲動態將CSS元素的尺寸調整爲特定的移動屏幕。喜歡的東西：將CSS尺寸調整爲特定的移動屏幕

var MY_DESIGN_WID = 420; 
var MY_ELEMENET_WID = 200; 
var actualWid = window.innerWidth; 
var id = document.getElementById('myElement'); 
id.style.width = Math.round(MY_ELEMENET_WID * actualWid/MY_DESIGN_WID) + 'px';

我這樣做對我的CSS元素的每一個相關的大小...是不是有一個「更好」的方式來實現相同的功能？

來源

2015-11-10 Free Bud

你爲什麼要通過JavaScript來做到這一點？更好的做法是通過CSS媒體查詢，請參閱：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ –

而不僅僅如此，'％'值的組合或'vw'，'vh'或'vmin'值和媒體查詢可以解決這個問題，並且比使用JS快很多。 – somethinghere

取決於元素是什麼。 '寬度：100％'通常可以完成這項工作。 – Blazemonger

您可以使用Javascript來實現這一點，但如果您只是在使用@media查詢的CSS中執行操作，那麼通過設備可以更輕鬆，更支持。

JavaScript可以在大多數設備上關閉，CSS也是硬件加速的，所以你也會看到性能的邊際改進。

#exampleDiv { 
     width: 300px; // Set width 300px 
    } 

    @media screen and (max-width: 768px){ //Apply conditions if screen width > 768px 
     #exampleDiv {width: 500px;} // Change width to 500px 
    }

來源

2015-11-10 16:45:33 Halycon

我使用媒體查詢，屏幕管理和某些特定效果難以用CSS實現我使用JavaScript。 JavaScript和CSS都可以訪問硬件圖形加速。

但是，使用CSS添加一個顯示內容取決於屏幕大小的類肯定很容易解決。

你可以找到像速度JS庫做一些動畫在javascript，例如

http://julian.com/research/velocity/

我真的很喜歡用速度打是好簡單的，我們將記錄在案。

有時，訪問某個元素的某些幾何屬性可以再次進行佈局，以便在使用JavaScript對動畫進行動畫處理時，它是平滑動畫的關鍵值，如果按照這種方式進行佈局，可以搜索佈局並重新繪製。

來源

2015-11-10 16:57:48

將CSS尺寸調整爲特定的移動屏幕

回答

相關問題