当宽度低于 500 像素时检测页面大小并更改 css答案

【问题标题】：Detecting page size and making css changes when width drops below 500px当宽度低于 500 像素时检测页面大小并更改 css
【发布时间】：2013-10-22 01:27:32
【问题描述】：

我正在开发一个网站，我想制作一个脚本来检测页面何时超过 500 像素以及何时低于 500 像素，以便我可以更改代码。我当前的代码在页面末尾有一些链接，例如页脚，当它低于 500 像素时，我希望它们彼此靠近；

<div class="footer-titles">
    <ul class="footer-titles-ul">
        <li><h class="titles">Link 1</h></li>
        <li><h class="titles">Link 2</h></li>
        <li><h class="titles">Link 3</h></li> 
    </ul>
</div>

还有我的css

.footer-titles{width: auto; min-width: 800px; left: 0px; right: 0px; position: absolute; bottom: 210px;}
.footer-titles-ul {list-style: none; padding-left: 120px;}
.footer-titles-ul li {padding-right: 90px; display: inline;}

所以当页面低于 500px 我希望 .footer-titles-ul li 中的 padding-right 为 30px 但是, 如果页面回到超过 500px 以恢复正常。

【问题讨论】：

媒体查询。谷歌他们。

标签： javascript jquery html css width

【解决方案1】：

您不需要为此使用 JavaScript，也不应为此使用 JavaScript。您需要 CSS3 媒体查询（除非您需要使用 polyfill 无法实现的旧浏览器支持）。

你会想要这样的东西来获得改变：

@media screen and (max-width: 500px) {
  /* UNDER 500px CSS here */

  .class{
   color: red;
  }
}

【讨论】：

【解决方案2】：

使用媒体查询是要走的路。只需将其添加到 CSS 文件的底部即可：

@media only screen and (max-width: 500px) {
    .footer-titles-ul {padding-right: 30px;}
}

【讨论】：

【解决方案3】：

如果你想要 jQuery，我认为这对你有用。但话又说回来，我会像其他人所说的那样推荐 CSS 媒体查询。

$(document).ready(function(){
    var detectViewPort = function() {
        var Wwidth = $(window).width();
        if (Wwidth < 500){
            $('.footer-titles-ul li').css('padding-right', '30px');
         }
        if (Wwidth > 500){
            $('.footer-titles-ul li').css('padding-right', '90px');
        }
    };

    $(function(){
      detectViewPort();
    });

    $(window).resize(function () {
       detectViewPort();
    });
});

【讨论】：