响应式布局media的三种引入使用方式

响应式布局media的三种引入使用方式

 

 

一、@media正常的使用

，在它下方所涵盖的范围里写元素的样式

<style>
@media screen and (min-device-width:400px){
    div{
        width:100px;
        height:100px;    
    }
}
</style>

 

 

二、在style标签上写media属性的方式

<style media="(min-device-width:400px) and (max-device-width:600px)">
    div{
        width:100px;
        height:100px;    
    }
</style>

 

 

 

 

三、引入外部样式表

当在media在这种区间的时候，就会引入css-1.css这个样式表

<link href="css/css-1.css" rel="stylesheet" 
        media="(min-device-width:100px) and (max-device-width:300px)">