CSS3 媒体查询使用疑问，使用时不生效

Question

今天在学习css3媒体查询，做一个简单的自适应页面，可是在看效果时却没有得到想要的结果
以下是截图

这是效果图

代码

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

a {
    text-decoration: none;
    color: #334455;
}

li {
    list-style: none;
}

@media screen and (min-width: 960px) {
    body {
        font-size: 14px;
    }

    .note-header {
        height: 80px;
        line-height: 80px;
        margin-bottom: 12px;
        border-bottom: 1px solid #dddee1;
    }

    .note-header .note-collapse {
        display: none;
    }

    .note-header .note-container {
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        /*padding: 0 24px;*/
        width: 1137px;
        margin: 0 auto;
    }

    .note-header .note-logo {
        margin-right: 24px;
    }

    .note-header .note-logo .note-brand {
        font-size: 18px;
        font-weight: 500;
    }

    .note-header .note-navbar {
        flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
    }

    .note-header .note-navbar .note-nav {
        float: left;
    }

    .note-header .note-navbar .note-nav.nav-right {
        float: right;
    }

    .note-header .note-nav > li {
        float: left;
    }

    .note-header .note-nav > li > a {
        display: block;
        padding: 0 12px;
        -webkit-transition: color .3s;
        -moz-transition: color .3s;
        -ms-transition: color .3s;
        -o-transition: color .3s;
        transition: color .3s;
    }

    .note-header .note-nav > li > a:hover {
        color: #ffaa06;
    }

    .note-main {
        width: 1137px;
        margin: auto;
    }

    .note-main .note-section {
        border-left: 1px solid #dddee1;
        padding: 12px;
        margin-bottom: 24px;
        -webkit-transition: border-left .3s;
        -moz-transition: border-left .3s;
        -ms-transition: border-left .3s;
        -o-transition: border-left .3s;
        transition: border-left .3s;
    }

    .note-main .note-section:hover {
        cursor: pointer;
        border-left: 3px solid #ffaa06;
    }

    .note-main .note-section h3 {
        font-weight: 400;
        margin-bottom: 12px;
    }

    .note-main .note-section .foot {
        margin-top: 12px;
        color: #666;
    }

    .note-main .note-section .foot span {
        margin-right: 16px;
        font-size: 12px;
    }
}

按照个人的理解：媒体查询中的条件是 (min-width: 960px)，那么当屏幕小于这个 960 的时候样式应该全部不生效的
但现在出现这样的问题，想请各位大佬帮忙看看是哪里的代码出了问题

Answer 1

head里是不是少了

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

还有是不是max-width，min-width的理解错了，互换下