IE无法识别我的媒体查询

Question

In other browsers it recognize and functional but it seems IE doesn't recognize my media queries. Is there anything wrong with my codes ? I've done one similar design like this one, there is no problem but this one is confusing. Why it doesn't recognize ?

Here is the css:

 /* This css is for small Mobile Devices */ @media (max-width: 767px) { a, a:focus, a:hover, a:active {outline: 0;} .slogan h2 {padding: 10px 0px;font-size: 18px;} .navbar-header a {padding: 14px 0;} .left_content_video {float: none;} .right_content_video {float: none;} .left_content_video {float: none;} .right_content_video {float: none;padding-bottom: 4px;} .left_content_video {margin-right: 0px;margin-bottom: 30px;padding-bottom: 5px;} .navbar-nav {margin: 0px;} .single_content_btm_ico {margin-bottom: 30px;} .content_videos h1 {margin-left: 14px;} .navbar-form {display: none;} .open > .dropdown-menu { /*customization*/ display: block;} .video_panel {} .video_panel h1 {background: #23262a none repeat scroll 0 0;font-size: 15px;padding: 12px 10px;} .clip_content {width: 100%;background: #FFFFFF;margin-bottom: 30px;} .video_panel_maincontent_1 h1, .video_panel_maincontent_2 h1, .video_panel_maincontent_3 h1, .video_panel_maincontent_4 h1 {margin-left: 15px;color: #ddd;display: inline-block;} } /* This css is for Tablet Devices */ @media (min-width: 768px) { a, a:focus, a:hover, a:active {outline: 0;border: none;} .slogan h2 {padding-top: 32px;} .logo img {padding: 12px 0px 0px;} .dropdown-toggle, .divider {display: none;} .navbar-header a {padding: 27px 0;} .videos { float: left; margin-right: 30px; width: 185px;} .left_content_video { margin-bottom: 30px;} .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { min-height: 1px; padding-left: 33px; padding-right: 15; position: relative;} .left_content_video {float: left;} .right_content_video {float: right;} .left_content_video {margin-right: 5px;} .slider {margin-top: 30px;} .content_videos {margin-top: 30px;} .navbar-nav {margin: 0 50px 0px;} .twitter_box:hover {background: #B32D45;} .facebook_box:hover {background: #B32D45;} .google_box:hover {background: #B32D45;} .content_videos h1 {margin-left: 31px;} li.dropdown:hover > a.dropdown-toggle {background:#333;} .dropdown:hover .dropdown-menu {display: block;margin-top: 0; // remove the gap so it doesn't close} .dropdown:hover .dropdown-menu { /*customization*/ /*color: #333;*/ background-color: #61D8A2; display: block;} .dropdown-menu > li > a {background-color: #2C2C2C;} li.dropdown:hover > a.dropdown-toggle{ background:#2C2C2C;} .dropdown-menu > li > a {border-bottom: 1px solid #3c3c3c;} .video_panel {margin-left: 175;} .clip_content {width: 100%;height: 385px;background: #FFFFFF;margin-bottom: 30px;} .navbar-form {display: none;} } /* This css is for Medium Devices */ @media (min-width: 992px) { a, a:focus, a:hover, a:active {outline: 0;border: none;} .slogan h2 {padding: 37px 0px;} .dropdown-toggle, .divider {display: none;} .navbar-nav {padding-left: 100px;} .navbar-header a {padding: 27px 0;} .videos {width: 185px;} .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative;} .slider {margin-top: 30px;} .navbar-nav {margin: 0px;} .twitter_box:hover {background: #B32D45;} .facebook_box:hover {background: #B32D45;} .google_box:hover {background: #B32D45;} .content_videos h1 {margin-left: 14px;} .dropdown:hover .dropdown-menu { /*customization*/ /*color: #333;*/ background-color: #61D8A2; display: block;} .dropdown-menu > li > a {background-color: #2C2C2C;} li.dropdown:hover > a.dropdown-toggle{ background:#2C2C2C;} .dropdown-menu > li > a {border-bottom: 1px solid #3c3c3c;} .video_panel {margin-left: 235px;} .clip_content {width: 100%;height: 165px;background: #FFFFFF;margin-bottom: 30px;} .video_panel_maincontent_1 h1, .video_panel_maincontent_2 h1, .video_panel_maincontent_3 h1, .video_panel_maincontent_4 h1 {margin-left: 15px;} } /* This css is for Large Devices */ @media (min-width: 1200px) { a, a:focus, a:hover, a:active {outline: 0;border: none;} .slogan h2 {padding: 37px 0px;} .logo img {padding: 12px 0px;} .dropdown-toggle, .divider {display: none;} .navbar-nav {padding-left: 150px;} .dropdown-menu > li > a {border-bottom: 1px solid #3c3c3c;} .navbar-header a {padding: 27px 0;} .navbar-nav li ul li a:hover, .navbar-nav li ul li a:focus, .dropdown:hover .dropdown-menu { /*customization*/ /*color: #333;*/ background-color: #61D8A2; display: block;} .slider {margin-top: 30px;} .videos {width: 235px;} .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { min-height: 1px; padding-left: 15px; padding-right: 15px; position: relative;} .slider {margin-top: 30px;} .navbar-nav {margin: 0px;} .twitter_box:hover {background: #B32D45;} .facebook_box:hover {background: #B32D45;} .google_box:hover {background: #B32D45;} .content_videos h1 {margin-left: 14px;} .dropdown:hover .dropdown-menu { /*customization*/ /*color: #333;*/ background-color: #61D8A2; display: block;} .dropdown-menu > li > a {background-color: #2C2C2C;} li.dropdown:hover > a.dropdown-toggle{ background:#2C2C2C;} .video_panel {margin-left: 300px;} .video_panel_maincontent h1 {padding: 15px;display: block;border-bottom: 1px solid #DDD;} .video_panel_maincontent_1 h1, .video_panel_maincontent_2 h1, .video_panel_maincontent_3 h1, .video_panel_maincontent_4 h1 {margin-left: 15px;border-bottom: 1px solid #BAC0C4;display: block;width: 1140px;;color: #BAC0C4} .clip_content {width: 100%;height: 202px;background: #FFFFFF;margin-bottom: 30px;} } 

Answer 1

检查你是否已经在html的头部有这行代码，因为有时候人们忘记写这一行导致媒体查询不起作用..

<meta name="viewport" content="width=device-width, initial-scale=1">