day18 css3响应式布局

媒体类型

彩屏类型：电脑屏幕、平板、智能手机

还有打字机、盲人阅读器

css中

@media screen{

       .box{

       width:400px;

        height:400px;

        background-color:red;

        

         }

}

min-width最小值为800px时，会发生改变 

@media screen and (min-width:800px){
    .box{
        width:800px;
        height:400px;
        background-color:red;

    }


}

max-width:600px 最大值为600培训时，会发生改变

此时区间为[0,600) and  [800,∞+) 

[600,800]是min-width:600px and max-width:800px

媒体查询关键词

and是并且  not用来排除不想要的媒体类型   only 限定某种设备   all针对所有设备（包括打字机、盲人阅读器）

媒体查询

import导入

1、只能用在css文件中和<style>标签中

@import url(a.css) screen and (max-width:600px);
@import url(b.css) screen and (min-width:600px) and (max-width:800px);
@import url(c.css) screen and (min-width:800px);

link标签

<link rel="stylesheet" href="a.css" meia="screen and (max-width:600px;)">

1、link是html提供的标签，@import他是css的语法规则，只能加载style标签和css文件

2、link标签引入的css在加载页面的同时加载,@import引用的css要在页面加载完毕后加载

3、兼容性：import他是css2.1提出的css语法规则，只能用于IE5+，link不受限制

4、DOM可控性:link可以支持js控制DOM，而@import不支持