关键词：
【中文标题】IE 无法识别我的媒体查询【英文标题】：IE doesn't recognize my media queries 【发布时间】：2015-09-22 06:23:23 【问题描述】：在其他浏览器中它可以识别并正常运行，但 IE 似乎无法识别我的媒体查询。我的代码有什么问题吗？我做过一个类似的设计，没有问题，但这个令人困惑。为什么不识别？
这是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;
【问题讨论】：
您使用的是哪个版本的 Internet Explorer？ “不识别”是什么意思？你不希望发生的事情正在发生。此外，您可以删除@media (max-width:767px)，您不需要它，因为您调用min-width 以获得更大的所有内容。
好的，我想通了@disinfor 我正在尝试使用媒体查询修改我的css，所以我分别包含了4个媒体查询不幸的是相同的媒体（最小宽度：1200px）和媒体（最小-宽度：992px）视口位于 bootstrap.css 中，因此存在冲突，这就是 IE 无法识别这两个媒体查询的原因。所以我只是从引导程序中排除这两个媒体查询并将其添加到我的 responsive.css 中。现在它工作得很好。我是引导程序的新手，所以我无法弄清楚这个简单的问题:)
你好@Saji。你能把你的评论变成答案吗？ ***.com/help/self-answer
【参考方案1】：
检查你是否已经在 html 的头部有这行代码，因为有时人们忘记写这行代码导致媒体查询不起作用..
<meta name="viewport" content="width=device-width, initial-scale=1">
【讨论】：
ie兼容
...放弃在样式表中进行媒体查询，改用JS实现媒体查询，能识别当前屏幕宽度打印出对应信息，但通过JQ获取元素，无论放在Vue构造中还是外面，得到的都是undefined，这个要研究下后来通过新建样式表，在link中进行媒体查询，解决... 查看详情
CSS 媒体查询最近不适用于 iPad
...计测试视图和其他在线网站检查响应式设计时，我的iPad无法识别它们。我的主动查询是在标题中查看端口HTML<meta 查看详情
基于 IE8 和 REM 的媒体查询
...ueries【发布时间】：2016-01-0809:11:46【问题描述】：我希望我的媒体查询基于REM，以支持用户进行各种浏览器缩放和/或基本/浏览器字体大小调整。理想情况下到IE8。加载jQuery、HTMLshiv、Respond和REMpolyfill，结果REMpolyfill不支持媒体查... 查看详情
媒体查询 Internet Explorer
...rer【发布时间】：2011-09-1215:51:19【问题描述】：我尝试在我的网站中使用媒体查询。它在Firefox和safari中运行良好，但不适用于IE。有谁知道让媒体查询在IE（InternetExplorer7和8）中运行良好。这里是代码：【问题讨论】：【参考方... 查看详情
IE9 iframe 内的媒体查询失败
...insideIE9iframe【发布时间】：2012-05-0604:07:48【问题描述】：我的CSS中有以下媒体查询：@mediascreenand(min-width:0px)and(max-width:319px)bodybackground-color:red;@mediascreenand(min-width:320px)and(max-wid 查看详情
IE7、IE8支持css3媒体查询[重复]
...(max-width:1024px).sidebarwidth:630px;获得IE7和8的修复程序，但它无法正常工作，因为它适用于IE9和其他浏览器。有没有不同的写法。我也尝试包含css3me 查看详情
Android TV 模拟器无法识别媒体键事件
】AndroidTV模拟器无法识别媒体键事件【英文标题】：AndroidTVemulatornotrecognizingmediakeyevents【发布时间】：2019-08-0701:02:42【问题描述】：我的活动中有这个事件处理程序：@OverridepublicbooleanonKeyUp(intkeyCode,KeyEventevent)switch(keyCode)caseKeyEven... 查看详情
IE8：让“nth-child”选择器在媒体查询中工作？
...ediaqueries?【发布时间】：2012-11-1507:02:18【问题描述】：在我的网站项目中，我使用媒体查询和nth-child选择器。IE8不支持开箱即用，但有一些polyfill可以提供帮助：Respond.js、mediatizr或css3-mediaquerie 查看详情
带有纯 CSS3 媒体查询的 IE9 响应式图像调整大小问题
...4-02-1323:06:46【问题描述】：我尝试设置响应式布局设计。我的问题是：在1024*768屏幕分辨率下，没有滚动条宽度的检查视口为1007。我在CSS3中将1007px视口的媒体查询设置为@mediascreenand(max-width: 查看详情
javascript 命令无法使用媒体查询打印
】javascript命令无法使用媒体查询打印【英文标题】：Mediaqueryprintdoesn\'tworkbyjavascriptcommand【发布时间】：2016-06-2120:41:17【问题描述】：我正在使用媒体查询打印构建一个html报告。到目前为止，一切都运行良好，直到我在执行JavaSc... 查看详情
IE8的媒体查询站点问题[重复]
】IE8的媒体查询站点问题[重复]【英文标题】：MediaQuerySiteIssuewithIE8[duplicate]【发布时间】：2014-01-2815:55:38【问题描述】：我目前有一个网站，我继承了代码，但它似乎没有为IE8正确加载媒体查询。respond.js脚本正在正确加载，因... 查看详情
IE 的 CSS 选择器限制中如何计算媒体查询？
】IE的CSS选择器限制中如何计算媒体查询？【英文标题】：HowaremediaqueriescountedinIE\'sCSSselectorslimit?【发布时间】：2014-09-2300:38:39【问题描述】：知道IE如何处理有关此CSS选择器限制的媒体查询吗？它是将其视为单个CSS规则还是将其... 查看详情
scssmixin仅响应ie媒体查询(代码片段)
在我的样式部分中找不到媒体查询
...媒体查询时，我在“@media”下看到一条红线，上面写着“无法解析符号媒体”。这是在一个asp.netmvc项目中。当我将媒体查询移动到它自己的.css文件时，它工作正常。 查看详情
为啥我的媒体查询对我的 CSS 没有影响？
...不同的屏幕尺寸，但我尝试使用的媒体查询由于某种原因无法正常工作。我尝试将设备宽度更改为768px以下，但查询对计数器没有影响，我不知道为什么。我 查看详情
css媒体查询ie10及以上(代码片段)
SVG 动画：使用 CSS3 媒体查询将 IE10 与其他现代浏览器隔离开来
...:42【问题描述】：我在SVG文件中编写了精美的加载动画。我的问题是InternetExplorer10不支持带有attributeName参数的SVG<anim 查看详情
CSS 媒体查询在 IE 9 中不起作用
】CSS媒体查询在IE9中不起作用【英文标题】：CSSmediaquerynotworkinginIE9【发布时间】：2011-10-1813:26:07【问题描述】：我在设计中包含了一些媒体查询，以根据浏览器的宽度更改页面某些元素的宽度。查询如下所示：@mediascreenand(min-wid... 查看详情