link标签和@import指令的对比

共同点：

1.都是外部引用css文件

2.都可以定义媒体查询

差别：

1.类别

<link>是html标签，引入css时只能写在html文件内，除此之外定义RSS、shortcut icon等

@import只能加载css：写在css文件内，需要在文件头部引用 ，写在html内，需要利用<style type="text/css"> 标签包裹标签标签标签

html内的标签包裹  标签包裹 标签包裹 标签包裹 标签包裹 标签包裹 标签包裹 标签包裹

2.加载方式

link 引用css时，在页面加载时文件会同时被加载

@import引用 css时，则会等页面全部下载完毕再被加载

3.服务对象

link标签为当前的页面服务，而@import只为CSS服务

4.兼容性

ink是HTML标签，所有浏览器都支持

@import是CSS 2.1才提出来的使用方式，一些老的浏览器不支持。

【比如@import的媒体查询是要ie9开始支持】

---

对于link标签和@import指令：

1.如果是引用的css文件

@import在前端优化时能不用尽量避免使用

有关@import的内容：@import 引用css文件

前端优化尽量避免使用 ：前端优化使用@import 判断

2。如果是引用的scss文件，可以避免