CSS 媒体查询语法的差异
Difference in CSS media query syntax
当我学会编写 CSS3 媒体查询时,显示给我的语法是这样的:
@media only screen and (max-width: Xpx){}
Xpx 当然是指您输入的任何数字。最近,我看到其他几个开发者,主要是在 Stack 上,像这样简单地编写 CSS 媒体查询:
@media (max-width: Xpx){}
当我访问诸如 Mozilla 的文档页面和 W3Schools.com 之类的网站时,他们似乎以与我相同的方式使用它,就像在我的第一个示例中一样。很久以前我学到的另一件事是,如果我不知道为什么要写代码,就不要写代码。在看到可以在没有 'screen only' 部分的情况下编写查询语法之后,我不得不问,我编写 CSS 媒体查询的方式与其他开发人员编写他们的媒体查询的方式有何不同?
only screen
的意思就是:仅适用于屏幕(而不是适用于所有类型的媒体,例如 print
outs)。
当我学会编写 CSS3 媒体查询时,显示给我的语法是这样的:
@media only screen and (max-width: Xpx){}
Xpx 当然是指您输入的任何数字。最近,我看到其他几个开发者,主要是在 Stack 上,像这样简单地编写 CSS 媒体查询:
@media (max-width: Xpx){}
当我访问诸如 Mozilla 的文档页面和 W3Schools.com 之类的网站时,他们似乎以与我相同的方式使用它,就像在我的第一个示例中一样。很久以前我学到的另一件事是,如果我不知道为什么要写代码,就不要写代码。在看到可以在没有 'screen only' 部分的情况下编写查询语法之后,我不得不问,我编写 CSS 媒体查询的方式与其他开发人员编写他们的媒体查询的方式有何不同?
only screen
的意思就是:仅适用于屏幕(而不是适用于所有类型的媒体,例如 print
outs)。