媒体查询留空-这会引起问题吗? [英] Media Queries left blank - could this cause problems?

问题描述

我很好奇在样式表中将@media定义保留为空，是否会导致呈现页面时出现一些问题?

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.

这是我的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 */
}
/*************************************************************************************************/
/* ==================== */
/*************************************************************************************************/

推荐答案

空@media规则对页面呈现或样式表解析没有影响.只要确保您正确打开和关闭它们即可.

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.

这篇关于媒体查询留空-这会引起问题吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！