根据浏览器宽度更改边距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

回答

相关问题