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 */
}
/*************************************************************************************************/
/* ==================== */
/*************************************************************************************************/
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.