@import和link的区别

使用媒体查询进行响应式布局，有三种实现方法：

1. 使用写在style中的@media；
2. 在style中使用@import关键字导入样式表；
3. 使用link标签导入样式表；

问题：其中，在使用@import导入样式表会出现样式表中的样式完全没有产生效果的现象，由于水平有限，理解不深，下边就对这一现象进行简单的分析，以此来学习@import和link

下面是正确的产生预期效果的代码

<!--HTML代码-->
<div id="container">
    <div id="s1"></div>
    <div id="s2"></div>
    <div id="s3"></div>
    <div id="s4"></div>
</div>

/*css样式代码*/


        @import url("../../css/style1.css") all and (min-width: 1024px);
        @import url("../../css/style2.css") all and (max-width: 1024px) and (min-width: 900px);

        #container {
            width: 80%;
            margin: 0 auto;
            height: 500px;
            background-color: #F6AF55;
        }

/*外部样式表style1.css*/
#s1,#s2,#s3,#s4{
    width: 24%;
    height: 100px;
    background-color: black;
    float: left;
    margin-left:1%;
    margin-top: 20px;
}

运行效果：

/*外部样式表style2.css*/
#s1,#s2,#s3,#s4{
    width: 30%;
    height: 100px;
    background-color: red;
    float: left;
    margin-left:1%;
    margin-top: 20px;
}

运行效果：

导致无法出现正常效果的错误代码：

/*css样式代码*/
          #container {
            width: 80%;
            margin: 0 auto;
            height: 500px;
            background-color: #F6AF55;
        }
        @import url("../../css/style1.css") all and (min-width: 1024px);
        @import url("../../css/style2.css") all and (max-width: 1024px) and (min-width: 900px);

原因：由于@import的特殊性，所以他放的位置只能是在style的最前面，如果放在后边，他将会被忽略。

---

@import和link的几点简单的区别：
1，从属关系上：@import是css提供的语法规则，他只有导入样式表的作用；
而link标签是HTML标签它的功能不止有引入样式。
2，加载顺序上：@import是只有在页面加载完毕之后才能够引入样式；而link标签的
加载是可以在页面加载的过程中一并进行加载的，这个也是造成了目前提倡使用link而不提倡使用@import的原因。效率高！
3，兼容性上：@import是在css2.1之后才具有的属性，只有在IE5+之后才会被兼容使用，但是link是一个HTML标签，所以他不存在兼容性问题。但是随着时间的发展，IE5之前的浏览器将会被逐一的取缔，所以现在基本上是无须担心兼容性问题。
4，DOM的可控性：@import由于只是一个css语法规则，所以在使用js进行DOM操作的时候，是不能操纵@import来进行样式的改变的。可以通过操纵link来进行改变样式。

关于@import的注意点：
1：@import规则一定要先于除了@charset的其他任何的css规则。即如果想要在style中再添加另外的css样式时，一定要记住写在@import的后边。
2：从其他博客中借鉴的关于@import的最兼容的写法是：
@import url(style.css)和@import url(“style.css”);这两种方法的兼容性最高，
3 ：目前更加追求的是高性能的网站设计，所以样式表的并行载入也应当考虑进来，所以为了能够使网页的加载速度更快，需要使用link来代替@import。这一点在一篇技术博客中他使用了一些http瀑布状图表来详细的描述@import的特点【https://www.qianduan.net/high-performance-web-site-do-not-use-import/】
4：不建议使用@import！！！；

---

最后的话：
人这一辈子，从幼稚到成熟，不知道要辜负多少人，流下多少眼泪。而自己也终究会为这份幼稚付出代价。 对自己好一点，也对身边的人温柔一点。