2014-01-21 278 views
1

我使用一些媒體查詢響應版本,但與最小的屏幕媒體查詢它打破了整個代碼。Css3媒體查詢響應版本

這是我的媒體查詢結構!

/* Landscape phone to portrait tablet */*1 
@media (min-width: 480px) and (max-width: 767px) { 

/* All Smartphones in portrait and landscape ----------- */*2 
@media only screen and (min-width: 321px) and (max-width: 479px) { 
/* Styles */ 

/***** For HTC Mobile *******/*3 
@media only screen and (min-width: 0px) and (max-width: 320px) { 

有了上述結構,第3個媒體查詢根本不好。

我在第三個媒體查詢的樣式表中編寫了以下代碼。

/***** For HTC Mobile *******/*3 
@media only screen and (min-width: 0px) and (max-width: 320px) { 

.module-title { 
font-size: 25px !important; 
line-height: 25px; 


} 
} 

而這種代碼是使所有版本的標題爲字體大小25

這是爲什麼不特定不僅爲小屏幕和爲什麼它承擔所有版本的效果呢?

而且,我應該在所有類的所有版本上使用「!important」

,如:

/* Landscape phone to portrait tablet */*1 
@media (min-width: 480px) and (max-width: 767px) { 

.module-title: 30px !important; 

} 

} 
/* All Smartphones in portrait and landscape ----------- */*2 
@media only screen and (min-width: 321px) and (max-width: 479px) { 
/* Styles */ 
.module-title: 27px !important; 

} 
} 

/***** For HTC Mobile *******/*3 
@media only screen and (min-width: 0px) and (max-width: 320px) { 

.module-title: 30px !important; 
} 
} 

任何想法?

+0

您的CSS無法驗證。 – cimmanon

+0

它驗證了26個webkit和moz的小錯誤! – user3178681

+0

儘可能避免使用'!important' **。您應該採用設計良好的標記和選擇器特異性。 '!重要'樣式是所有其他樣式中最特別的,並且覆蓋所有其他樣式,包括內聯樣式和ID。一般來說,這是sl and不馴的,應該避免不惜一切代價。 – Ennui

回答

0

從無響應的類中刪除!important。並確保您正確關閉媒體查詢。

例子:

@media (max-width: 300px { 

/*styles goes here*/ 
.tag { 
} This is tag closing 
} this is query closing 
+0

我在最後使用double}的media @ keyframes,它是帶有雙括號的單個代碼?這是否使我的代碼不好? – user3178681

+1

也許是的,或者您在代碼中使用了更多的額外括號,刪除附加括號並在查詢代碼的末尾再次關閉它!希望這可以幫助! – user2997826

+0

令人驚歎:)我刪除了額外的括號,現在一切正常。實際上,@keyframes使用雙括號的代碼亂七八糟,但現在它的作品像魅力:)非常感謝你 - – user3178681

0

這句法是非常錯誤的:

/* Landscape phone to portrait tablet */*1 
@media only screen and (min-width: 321px) and (max-width: 479px) { 
/* Styles */ 
.module-title: 27px !important; 

} 
} 

...因爲你不能只給一個屬性來選擇!

上面的代碼的註釋後的*1註釋外部。

所以問題在於和雙括號。如果在其他media-queriesonly screen,min-width: 321pxmax-width: 479)中滿足任何條件,則下面的!important只會打破其他查詢。

@media only screen and (min-width: 321px) and (max-width: 479px) { 
    .module-title { font-size: 27px !important; } 
} 

它不會影響下面的媒體查詢,例如:

@media only print and (min-width: 480px) { 
    .module-title { font-size: 27px; } 
} 

上面的語法是正確的。