Question

所以我在这个网站上广泛研究过媒体查询无效，我仍然遇到麻烦。即使我投入，也不会显示保证金变化，

<meta name="viewport" content="width=device-width, initial-scale=1.0">

以下是我想要做的简单示例，

<div class="modal-content">
 /*Content of modal is here*/
</div>

以下是媒体查询后面的css：

.modal-content{
    margin-top: 100px;
    margin-right: 10px;
    width: 300px;
}

@media only screen and (max-width: 320px) {
    .modal-content {
        margin-top: 100px;
        margin-left: -40px;
        width: 300px;
     }
}

我需要给出模态边距，以便它看起来像iphone 5的中心，但它根本不会读取我的媒体查询。我错过了什么吗？

Answer 1

目标iphone 5使用以下媒体查询代码

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {
    // your code
}

在这里，您可以了解有关它的更多信息https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

媒体查询不起作用？

1 个答案: