媒体查询@media

媒体查询

媒体查询 根据不同设备的宽度，设置不同的样式

        关键字是@media

        属性

            only 指的是只针对某一种设备    

            not 不针对某个设备

            screen 电脑屏幕，手机，ipad 设备中的一种，print 打印机，speech 盲人听读机， all 指的是所有设备

            and 链接后面括号中条件的关键字，and的左右两边必须有空格

            () 在()括号里面设置条件,他里面的条件一般都是max-width min-width的设置

            {} 满足条件的时候，设置的css样式必须书写在 {} 内

        注意事项：媒体查询不提供优先级，因此，需要把媒体查询的样式最后加载，基础样式写在媒体查询的前面，这样才不会覆盖媒体查询的样式

/* 媒体查询 
        屏幕宽度 大于600 小于800的时候，渲染css样式
    */
    @media only screen and (max-width:1000px) and (min-width:800px)
     {
        .wp{
            height: 150px;
        }
        .left{
            background: #ccc;
        }
    }

基础样式不能写在媒体查询下面

外部引入媒体查询

<!-- 外部引入媒体查询的写法 -->
    <link rel="stylesheet" href="../css/c800.css" media="only screen and (min-width:800px) and (max-width:1000px)">
    <link rel="stylesheet" href="../css/c1000.css" media="only screen and (min-width:1000px)">