我最大寬度的媒體查詢應用時，它不應該

我想使一個網站響應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

我最大寬度的媒體查詢應用時，它不應該

回答

相關問題