Question

我最近推出了一个网站，我正在尝试优化它以用于移动显示。大多数网站在没有任何媒体查询的情况下在移动设备上看起来很好，但我使用的是jquery灯箱功能，我不能完全使用媒体查询来集中在移动显示器上。我不确定我的语法是否不正确，或者我对媒体查询如何与jquery交互的理解存在根本缺陷。

我目前的CSS如下：

#lightbox{position: fixed;
      top: 0;
      left: 0;
      width:100%;
      overflow-x: scroll;
      height: 100%;
      background: rgba(0, 0, 0, .95);}

#lightbox img {box-shadow:0 0 25px #111;
           -webkit-box-shadow:0 0 25px #111;
           -moz-box-shadow:0 0 25px #111;
           height: auto;
           width: 750px;
           margin-top: 2%;
           margin-left: 21%;
           margin-bottom: 2%;}


    @media only screen and (max-width: 500px){
        #lightbox img {margin-top: 10%;
                       margin-left: 15%;}
    }
}

Jquery看起来像这样：

jQuery(document).ready(function($){
            $('.lightbox_trigger').click(function(e){
                var image_src = $(this).attr("src");
                if($('#lightbox').length > 0) {
                    $('#content').html('<img src="' + image_src + '" />');
                    $('#lightbox').show();
                }
                else{
                    var lightbox =
                    '<div id="lightbox">' + 
                        '<div id="content">' + 
                            '<img src="' + image_src + '" />'
                        '</div>' +  
                    '</div>';
                    $('body').append(lightbox);
                }
            });
            $('#lightbox').live('click', function(){
                $('#lightbox').hide();
            });
        });

我尝试了多种变体，例如将媒体查询移到#lightbox img标记的右括号之外，例如：

#lightbox{position: fixed;
      top: 0;
      left: 0;
      width:100%;
      overflow-x: scroll;
      height: 100%;
      background: rgba(0, 0, 0, .95);}

#lightbox img {box-shadow:0 0 25px #111;
           -webkit-box-shadow:0 0 25px #111;
           -moz-box-shadow:0 0 25px #111;
           height: auto;
           width: 750px;
           margin-top: 2%;
           margin-left: 21%;
           margin-bottom: 2%;}

 @media only screen and (max-width: 500px){
        #lightbox img {margin-top: 10%;
                       margin-left: 15%;}
    }

或者摆脱媒体查询中的#lightbox，但似乎没有任何东西对移动显示产生影响。我对网页设计一般都很陌生，而且我的问题很难理解，因为我一开始并不真正理解问题所在。任何建议将不胜感激！

Answer 1

这样的事情应该有用;

 return isParallel()
               ? terminalOp.evaluateParallel(this, sourceSpliterator(terminalOp.getOpFlags()))
               : terminalOp.evaluateSequential(this, sourceSpliterator(terminalOp.getOpFlags()));

编辑; http://codepen.io/anon/pen/VPbpwz

Answer 2

    @media (max-width: 500px){
          #lightbox img {
          position:absolute;
          top: 10%;
          left: 15%;
      }
}

您的JS代码包含太多HTML标记，请尝试使用模板引擎，检查

Moustache Js

使用ID选择器

2 个答案: