根據瀏覽器寬度更改邊距Javascript

我試圖在我的網站上創建一個「附加評論」框，該框位於頁面右側，而右側有4個輸入。根據瀏覽器寬度更改邊距Javascript

出於某種原因，瀏覽器調整大小的註釋框位於輸入後面。

我想讓瀏覽器小於400像素，它會在留言框中應用一個頁邊距。我嘗試了下面的內容，但這似乎不起作用。

var browserSize = window.innerWidth(); 
    var additional = document.getElementById("additional"); 

    if(browserSize < 400px) { 
     additional.style.marginTop = "200px"; 
    }

有人可以指導我去哪裏？非常感謝提前！

來源

2017-03-02 Coder

是對你的CSS媒體查詢選項？或者你必須使用JS來做到這一點？ –

是的，他們按照Ralph David Abernathy的建議工作。只是缺乏經驗，我認爲JS會是一條路。 – Coder

爲什麼不使用CSS媒體查詢？你可以在樣式表中做這樣的事情：

@media only screen and (max-width: 400px) { 
    #additional { 
     margin-top: 200px; 
    } 
}

但是，你應該儘量避免使用ID作爲CSS選擇器儘可能。

來源

2017-03-02 17:50:42

啊，這應該工作！非常感謝。我對CSS很熟悉，但我沒有看過它的媒體一面。感謝幫助！ – Coder

沒問題，你應該看看SCSS。它使寫作媒體查詢變得更容易！檢查出http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32 –

添加瀏覽器調整大小事件偵聽器和函數裏面工作：

function processResize() 
{ 
var browserSize = window.innerWidth(); 
    var additional = document.getElementById("additional"); 

    if(browserSize < 400px) { 
     additional.style.marginTop = "200px"; 
    } 
} 
window.addEventListener("resize", processResize);

來源

2017-03-02 17:51:37

感謝您的評論，我使用媒體查詢排序，但謝謝用JS回答！我相信這將在未來派上用場。非常感謝！ – Coder

根據瀏覽器寬度更改邊距Javascript

回答

相關問題