Media Queries left blank - could this cause problems?

问题

Im curious about leaving the @media definitions empty in my stylesheet and if this could cause some problems rendering the page?

I only want to include those queries for presentation - to show them, that it's possible to go responsive with the queries enabled.

here is my css:

/*************************************************************************************************/
/* Media Queries - Responsive Layout Definitionen */
/*************************************************************************************************/

/* Smartphones (Portrait und Landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (Portrait und Landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops und Laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Große Screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/*************************************************************************************************/
/* ==================== */
/*************************************************************************************************/

回答1:

Empty @media rules have no effect on page rendering or stylesheet parsing. Just make sure you open and close them properly.

If you need the details, the relevant portions of the grammar can be found in the spec. But in a nutshell, a @media rule may have zero or more rules nested within, which means it may be empty with no issues.

来源：https://stackoverflow.com/questions/24361700/media-queries-left-blank-could-this-cause-problems

标签

css

media-queries