如何更改轉換：根據屏幕分辨率轉換css規則？

下面我有這段JS代碼。當屏幕的分辨率在995px和1200px之間時，那麼transform: translate的css動畫應該是22％。我怎樣才能做到這一點？如何更改轉換：根據屏幕分辨率轉換css規則？

CSS代碼：

.to_be_center { 
     position: relative; 
     transform: translate(-27%, 25%); 
}

JS代碼：

function resolution() { 
    width = window.screen.availWidth; 

    if ((width>=995) && (width<1200)){ 
     document.getElementsByClassName("to_be_center").style.transform= "translateX(14%)"; 
    } 
} 

resolution();

我調用函數體 - <body onload="resolution()">。

來源

2016-11-17 Santiya

'<體在onResize = 「分辨率（）」>'，使得它被稱爲上窗口調整大小。和寬度參考這[獲取屏幕的大小，當前網頁和瀏覽器窗口]（http://stackoverflow.com/questions/3437786/get-the-size-of-the-screen-current-web-page -and-browser-window） – Sagar

感謝您對正文的修正 - 當我使用Inspector中的Toogle Device Tool對其進行測試時，解析正在工作，但我認爲問題出現在這一行'document.getElementsByClassName（「to_be_center」）。 style.transform =「translateX（14％）」;' – Santiya

document.getElementsByClassName（''）返回一個數組。 'document.getElementsByClassName（）[0] .style.transform ..' – Sagar

爲什麼不直接使用一個CSS媒體查詢，並定義爲屏幕尺寸.to_be_center應該如何工作？

@media (max-width: 995px) { 
    .to_be_center{ 
    /*your styles here*/ 
    } 
}

的詳細信息可以在這裏找到：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

來源

2016-11-17 19:09:50 Vinny

謝謝，但我已經嘗試了很多次CSS媒體查詢，並沒有工作。另外我讀到它們與CSS動畫不匹配，不知道爲什麼，我試着用JS來嘗試。 – Santiya

是你的CSS被覆蓋？你檢查了嗎？您可以發佈您的CSS，我們可以用 – Sagar

'@media屏幕幫助和（最小寬度：995px）和（最大寬度：1200像素）{ .to_be_center { 的位置是：相對的; transform：translate（-22％，25％）; /*背景顏色：紅色; * /} } ' 當我嘗試與背景色的作品，但沒有與動畫。 – Santiya

如何更改轉換：根據屏幕分辨率轉換css規則？

回答

相關問題