我最大宽度的媒体查询应用时，它不应该

我想使一个网站响应iPhone 7的问题是，我的媒体查询工作时，它不应该;对于iPhone 7，我使用的是max-width: 320px，但他的真实分辨率是375px（至少在https://mydevice.io/devices/中显示），那么为什么我的媒体查询应用？ 375px是大于320像素我最大宽度的媒体查询应用时，它不应该

/* iPhone 7 */ 
@media screen and (max-width: 320px) { 
.qr_popup { 
    left: 50%; 
    top: 200px; 
    transform: translate(-50%, -50%); 
    padding: 10px; 
    border-radius: 10px; 
    background: #ededed; 
    width: 85%; 
    position: relative; 
    box-shadow: 0px 0px 3px white;}} 

/* Galaxy */ 
@media screen and (min-width: 360px) { 
.qr_popup { 
    left: 50%; 
    top: 250px; 
    transform: translate(-50%, -50%); 
    padding: 10px; 
    border-radius: 10px; 
    background: #ededed; 
    width: 85%; 
    position: relative; 
    box-shadow: 0px 0px 3px white;}}

不同是在顶部：250像素;

来源

2017-09-01 iSender SMS

我不认为需要创建一个与onyl 30px差异的新媒体查询。也许是最好的，以移动的第一个aproach。从最小的媒体查询开始，并建立起来。 – Keutelvocht

您的第二个媒体查询将应用于任何视区，即至少 360px宽，如您所说的iPhone 7是375px。

360px是小于 375px所以应用第二个媒体查询。

FWIW我不会针对特定设备（除非您有紧急需求）。我会从小的开始，并添加断点作为您的内容和布局决定什么时候放大视口。

来源

2017-09-01 14:05:29 hungerstar

不同的是在顶部：250px;不，第一个媒体查询应用在我的iphone7上，而不是根据代码，真的很奇怪 –

然后你有其他东西流血。您应该创建[最小，完整和可验证示例]（https://stackoverflow.com/help/mcve）。 – hungerstar

我最大宽度的媒体查询应用时，它不应该

回答

相关问题