在网站自适应设计中,@media与@media screen是必须用到的css代码,可能大家对此并不陌生。但是大家又知不知道@media与@media screen的区别在哪呢?在自适应设计中你是用@media还是用@media screen?你知不知道两者产生的结果有什么不同呢?这些问题我想很多人都不清楚吧。本文便通过实例给你说说@media与@media screen的区别,主要是告诉你它们产生的效果区别在哪。 @media与@media screen手机网页区别 好吧,理论方面暂时放在一边,先看看两者产生的手机网页视图有什么不同。 @media与@media screen手机网页 上图看出,没有任何区别。没错,确实没有任何区别,因为@media与@media screen的css在手机设备里都是有效的。 @media与@media screen打印网页区别 两者在手机设备上没有区别,在打印设备上是怎样的呢?看看如下截图。 @media打印网页 @media screen打印网页 很明显,两者的打印效果是不同的。 至此,我们应该明白了@media与@media screen的区别了吧,没错,@media screen的css在打印设备里是无效的,而@media在打印设备里是有效的,这就是它们的区别了。 知道了它们的区别,我们就应该懂得如何使用它们了。如果css需要用在打印设备里,那么就用@media ,否则,就用@media screen。 不过这只是笼统的做法,其实如果把“screen”换为“print”,写为@media print,那么该css就可用到打印设备上了,但要注意,@media print声明的css只能在打印设备上有效哦。 通过此实例的见解,我们可以举一反三,对@media的用法就能更易接受了。下面的知识扩展可以让你更深入地了解@media的各种用法。
|