学习媒体查询 1

1. 媒体查询

媒体查询：为不同尺寸的屏幕设定不一样的样式

<style>
    .header{
        margin：0 auto；
        width: 100px;
        height: 200px;
        background-color: aqua;
    }
    @media screen and (min-device-width : 100px) and (max-device-width : 200px)
    {
        .header{
            background-color: blueviolet;
        }
    }

    @media screen and (min-device-width : 200px) and (max-device-width :400px) {
        .header{
            background-color: brown;
        }            
    }
</style>

2. @media常用参数

属性名称	作用
width、height	浏览器可视宽度和高度
device-width	设备屏幕的宽度
device-height	设备屏幕的高度