Question

如果屏幕宽度小于568px，我试图通过媒体查询更改弹出窗口的位置，但不知何故它不起作用.. 这里;代码： CSS：

<style type="text/css">
            #wrapper
            {
                left: 300px;
                position: relative;
                width:500px;
            }

            .popup
            {
                display:none;
                width:300px;
                border:1px solid red;
                padding: 10px;    
                position: absolute;
                margin: 10px 0 0 0px;
            }
            @media only screen and (max-device-width : 568px) {
            .popup
                {
                   margin: 10px 0 0 -180px;
                }
            }
        </style>

HTML：

<div id="wrapper">
        <a href="#" class="def">What is Lorum Ipsum?</a>
        <div class="popup">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
        </div>
    </div>
    </body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
    <script>
    $(".def").click(function(){
        $(".popup").toggle();
    });
    </script>

这是jsfiddle链接： http://jsfiddle.net/0sfve6t3/2/

感谢您的反馈/输入

Answer 1

尝试jquery：

if($(window).width() < 568){
  $('.popup').css('margin','10px 0 0 -180px');
}

尝试css：

@media only screen and (max-width: 567px){
 .popup{margin: 10px 0 0 -180px;}
}

弹出位置根据屏幕宽度更新

1 个答案: