2017-05-04 104 views
0

所以我在這個網站上廣泛地研究過媒體查詢不工作,我仍然遇到麻煩。保證金的變化將不會出現,即使我把所有,媒體查詢不會工作?

<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,但也不會看我的媒體查詢的。我錯過了什麼嗎?

+0

你確定你已經達到'320px'的寬度是多少? – Swellar

+0

我清除緩存後,我的css開始工作。儘管謝謝你的幫助。 – CheeseDrizzle

回答

0

目標低於媒體查詢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/

+0

謝謝!實際上,一旦我清除了我的緩存,所有的東西都開始工作了 - 讓他們像說的那樣簡單愚蠢。我會解決這個帖子。 – CheeseDrizzle