html中媒体查询技术和引用方式

媒体查询技术
通过Media属性来设置样式表的引入条件，
可以实现不同显示设备使用不同样式，也可以

做到统一显示设备的不同状态显示不同样式

                媒体查询实现了，样式表的有条件引入 
默认样式下样式表的显示条件是屏幕screen

有三种引入方式

1.在样式表的所有选择器后通过@media screen and (条件1) and (条件2){
样式表
}
有条件的引入，如果屏幕尺寸到达范围内后某个盒子样式不能被改变，从样式优先级和叠加
特性角度去检查

2写在Link标签中，根据屏幕宽度有条件的引入外部样式表 
<link rel="stylesheet" href="" media  =" screen and (条件1) and (条件2)">

3.写在style标签中，根据屏幕宽度有条件的执行某个内部样式表

<style  media="screen and (条件1） and (条件2)" ></style>

简单例子  随着屏幕大小的变化盒子颜色会发生变化

head中写  

<style type="text/css">
.box{
width: 500px;
height: 500px;
background: red;
}

/* 1000以上红色
800-1000绿色
600-800蓝色
600以下黑色*/


/*1000以下是绿色*/
@media screen and ( max-width:1000px){
.box{
background: green;
}
}
/*800以下是绿色*/
@media screen and ( max-width: 800px){
.box{
background: blue;
}
}
/*600以下是绿色*/
@media screen and ( max-width: 600px){
.box{
background:black;
}
}

</style>

body中写一个div

<div class="box"></div>