1

私はサイトを開発しており、ページが 500px を超えている場合とそれを下回っている場合を検出してコードを変更できるようにするスクリプトを作成したいと考えています。私の現在のコードには、ページの最後にフッターなどのリンクがいくつかあります。たとえば、500px 未満の場合は、それらを互いに近づけたいと考えています。

<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 を超えると通常に戻ります。

4

3 に答える 3

4

これには JavaScript は必要ありません。JavaScript を使用するべきではありません。CSS3 メディア クエリが必要です (ポリフィルでは不可能な古いブラウザー サポートが必要な場合を除きます)。

変更を取得するには、次のようなものが必要です。 

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

  .class{
   color: red;
  }
}
于 2013-10-21T16:57:46.240 に答える
0

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();
    });
});
于 2013-10-21T17:22:02.793 に答える