Css3媒體查詢響應版本

我使用一些媒體查詢響應版本，但與最小的屏幕媒體查詢它打破了整個代碼。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; 
} 
}

任何想法？

來源

2014-01-21 user3178681

您的CSS無法驗證。 – cimmanon

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

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

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

例子：

@media (max-width: 300px { 

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

來源

2014-01-21 21:14:04 user2997826

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

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

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

這句法是非常錯誤的：

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

} 
}

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

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

所以問題在於和雙括號。如果在其他media-queries（only screen,min-width: 321px或max-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; } 
}

上面的語法是正確的。

來源

2014-01-21 21:29:08

Css3媒體查詢響應版本

回答

相關問題