media type 与media query

CSS link、@import共同点:都是为了加载CSS文件。

CSS link、@import不同点:

  • Link属于XHTML标签,而@import完全是CSS提供的一种方式。link除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
  • @import要起作用,必须放在样式文件的最前面(包括注释的前面)。
  • 并行加载、串行加载,加载性能的问题,参考下面的链接
  • 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
  • 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。 ?没有验证过!

建议:不适用@import,使用link
don’t use @import
Yahoo 网页性能最佳实践:使用link,不使用import

media type(媒体类型):是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面。
例子:

<link href="style.css" media="screen print" ...  
  
@import url("style.css") screen;  
  
<style media="screen">  
@import url("style.css");  
</style>

media query(媒体查询):是对media type的一种增强,是CSS 3的重要内容之一。
例子:

<link media="only screen and (max-device-width: 480px)" href="style.css">

参考:media type与media query

知识共享署名4.0国际许可协议,转载请保留出处; 部分内容来自网络,若有侵权请联系我:前端学堂 » media type 与media query

赞 (3) 打赏

评论 0

如果对您有帮助,别忘了打赏一下宝宝哦!

支付宝扫一扫打赏

微信扫一扫打赏