关键词：
【中文标题】基于 IE8 和 REM 的媒体查询【英文标题】：IE8 and REM based Media Queries 【发布时间】：2016-01-08 09:11:46 【问题描述】：我希望我的媒体查询基于 REM，以支持用户进行各种浏览器缩放和/或基本/浏览器字体大小调整。理想情况下到 IE8。
加载 jQuery、HTMLshiv、Respond 和 REM polyfill，结果 REM polyfill 不支持媒体查询。虽然不太明白为什么，https://github.com/chuckcarpenter/REM-unit-polyfill/issues/60#issuecomment-135187895 但这是事实。
Chuck 说“在启动 polyfill 时忽略 MQ 规则，因为仅在桌面上需要支持”是什么意思。那么当 polyfill 在 MQ 支持中被踢掉的时候呢？为什么 IE8 中的 MQ 支持仅适用于桌面？
难道不是有些用户没有完全打开浏览器窗口，而是只有一半或四分之一的屏幕，因此屏幕宽度更小吗？我的浏览器大部分时间都没有全尺寸，无法在其他窗口等中工作。
那么，你们现在如何在 IE8 中支持基于 REM 的媒体查询？
像这里提到的https://***.com/a/21122705/1010918 的后备方案会起作用吗？
@media screen and (min-width: 26.25rem , min-width: 420px) ?
我不认为这会起作用（我希望！！）所以我真的只能用条件 cmets 为 IE8 分配不同的样式表了吗？
你是这样处理的吗？我可能有哪些其他解决方案？
我已经阅读并思考了所有这些：Basic CSS features not working in IE8How do you use mobile-first in IE8media query unlinking IE8 stylesheetmodernizr for ie8 media query supportWhat´s best practice to responsive design? Use % or em and rem?IE8 support for CSS Media Query
查看此视频以获取基于 REM 的设计示例。我相信这也可以用 ie8 以某种方式完成。http://webdesign.tutsplus.com/courses/responsive-web-design-revisited/lessons/what-responsive-means-today-and-what-youll-be-building
【问题讨论】：
IE8 无法响应 css。只需为桌面使用固定布局。 用 IE8 查看 getbootstrap.com 效果很好。问题是如何最好地使其与媒体查询中的 REM 单元一起工作，因为在媒体查询中使用 PX（就像 BS 3 一样）并不是 RWD 的真正意义所在。所以要么是单独的样式表，要么是其他东西。我正在寻找那个“别的东西”，我确信它就在那里。 【参考方案1】：IE8 也不支持媒体查询，所以并不是 polyfill 将它们关闭，只是 IE8 根本不支持它们。
Chuck 说“在启动 polyfill 时忽略 MQ 规则，因为仅在桌面上需要支持”是什么意思。那么当 polyfill 在 MQ 支持中被踢掉的时候呢？为什么 IE8 中的 MQ 支持只需要桌面？
他的意思是IE8只能在桌面上运行，所以以响应式的方式支持它是没有意义的。
难道不是有些用户没有完全打开浏览器窗口，而是只有一半或四分之一的屏幕，因此屏幕宽度更小吗？我的浏览器大部分时间都没有全尺寸，无法在其他窗口等中工作。
好的，所以也许以响应式的方式支持它是有道理的，但这对开发人员来说不是一个足够好的理由——他认为添加这种支持的额外困难将是太多的工作，以至于不值得.
他确实在票中说，如果其他人想做这项工作并提交代码更改，那么他会考虑将它们带入库，但他不会这样做。
有多少工作量？
嗯，值得再次指出的是 IE8 不支持媒体查询。因此，为了在 IE8 中获得 MQ，您需要使用另一个 polyfill 库，例如 RespondJS。
因此，使 IE8 REM 与 MQ 一起工作的工作实际上是使 REM polyfill 和 RespondJS 相互了解并协同工作——很有可能您需要对这两个库进行更改以使它完全有效。这可能很难做到。我当然可以理解他们为什么决定不打扰。
因此，就目前情况而言，我认为您将不得不接受您想做的事情在 IE8 中是不可能的。除非您想开始在 polyfill 库中进行修改以自己修复它。
【讨论】：
谢谢。因此，如果必须的话，基本上一个 IE8 或者可能是一个 IE8 和更低的样式表可以派上用场，否则使用 IE9 > 并祈祷。 我知道这个问题已经过时了，但是如果您需要解决这个问题而不是祈祷，我确实“破解了 polyfill”，请查看我的解决方案：github.com/nbouvrette/remPolyfill【参考方案2】：因为我遇到了同样的问题，你实际上有一个真正的选择。不确定 2017 年会有很多人对此解决方案感兴趣，但它确实有效！
https://github.com/nbouvrette/remPolyfill
【讨论】：
好一个 Nicolas！ 就在我想切换到 IE10 基线时，你想到了这个。可能不是很多人需要这个，但是当你这样做时，它会非常棒使用。如果我可以大胆地这么说的话，肯定会尝试一下，尤其是拥有全球/亚洲/中国用户的网站将从中受益匪浅。不知道是什么情况，但是 XP/IE6 和 7/IE8 仍然会持续很长时间，并不是每个人都会更新 IE 或安装最新的 Chrome 或 FF。 Also this 即使与问题无关，因为这将是我的下一步，现在我不需要重写 JS eventListeners .. 也肯定会试一试没有什么坏处，因为它都可以用条件 cmets 调用，哦，在 2017 年支持 IE6-IE8 的乐趣（不是讽刺或消极的方式）。:) 还有 this 和 this，虽然后者有点老，但随着 7/IE8 的提供，这个 polyfill 将真正派上用场，如果你为那个市场设计，谢谢 Nicolas。跨度> 很高兴看到我不是唯一享受旧版修复的人 :) 如果您有任何问题，请直接联系我，我很乐意提供帮助。我设法建立了一个仍然可以在 IE8 上运行的网站，首先是移动设备，HTML5 带有自定义脚本加载器并且没有丑陋的标记。我喜欢用 IE8 作为终极兼容性测试 :) 非常感兴趣自定义脚本加载器以保持标记干净。我在哪里可以找到您构建的站点和加载程序，或者更好的是，我如何直接 ping 您？不在LinkedIn上，所以除了在您的回购上提出问题外，我无法与您联系，但是我的个人资料中提供的电子邮件可以正常工作，如果您可以给我发短消息，我会很快就联系上了。谢谢。移动端布局之路-----rem布局(代码片段)
...面只有一个html，可以很好来控制整个页面的元素大小。媒体查询什么是媒体查询媒体查询（MediaQuery）是CSS3新语法。使用@media查询，可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置... 查看详情
移动web开发之rem基础&媒体查询(代码片段)
...容在黑马，本篇目录：一、rem基础1.1 rem单位二、媒体查询2.1什么是媒体查询2.2语法规范mediatype查询类型2.3案例：根据页面宽度改变背景变色2.4媒体查询+rem实现元素动态大小变2.5引入资源（理解）一、rem基... 查看详情
01.媒体查询(代码片段)
...tml里面的文字大小来改变页面中元素的大小可以整体控制媒体查询MediaQuery,是CSS3新语法1.用@media开头注意@符号@media2.mediatype媒体类型//不同终端设备划分成不同的类型，称为媒体查询all用于所有设备print用于打印机和打印预览screen... 查看详情
IE8的媒体查询站点问题[重复]
】IE8的媒体查询站点问题[重复]【英文标题】：MediaQuerySiteIssuewithIE8[duplicate]【发布时间】：2014-01-2815:55:38【问题描述】：我目前有一个网站，我继承了代码，但它似乎没有为IE8正确加载媒体查询。respond.js脚本正在正确加载，因... 查看详情
在 Chrome 中使用 rem 单位进行媒体查询？
】在Chrome中使用rem单位进行媒体查询？【英文标题】：MediaquerieswithremunitsinChrome?【发布时间】：2012-08-2510:12:03【问题描述】：是否可以在Chrome媒体查询中使用rem单位？rem单元在Chrome中完美运行，似乎媒体查询不支持它们。这可能... 查看详情
IE7、IE8支持css3媒体查询[重复]
】IE7、IE8支持css3媒体查询[重复]【英文标题】：IE7,IE8supportforcss3mediaquery[duplicate]【发布时间】：2013-08-1420:13:18【问题描述】：我试过了：@mediascreenand(max-width:1024px).sidebarwidth:630px;获得IE7和8的修复程序，但它无法正常工作，因为它... 查看详情
html5移动端开发(rem和媒体查询@media)(代码片段)
css下：index.css@charset"utf-8";body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,figcaption,figuremargin:0;padding:0;/*添加怪异盒，margin和pa 查看详情
css使用rem与媒体查询(代码片段)
响应式布局的常用解决方案对比(媒体查询百分比rem和vw/vh）(代码片段)
...需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。px和视口媒体查询百分比自适应场景下的rem... 查看详情
IE8：让“nth-child”选择器在媒体查询中工作？
】IE8：让“nth-child”选择器在媒体查询中工作？【英文标题】：IE8:makingthe`nth-child`selectorworkinsidemediaqueries?【发布时间】：2012-11-1507:02:18【问题描述】：在我的网站项目中，我使用媒体查询和nth-child选择器。IE8不支持开箱即用，... 查看详情
ie8实现媒体查询
IE8实现媒体查询IE8下想实现不同分辨率样式的兼容，需要用Css3中的media,可是IE8不支持@media啊翻不出去，那找度娘果然找到了一个Demo测试一下，IE8媒体查询也不是多难1、下载Respond2、找到Respond文件中的respond.src.js3、已测试Demo为... 查看详情
bootstrap在ie8下，兼容媒体查询
最近使用bootstrap做网站的时候发现，在ie8下的媒体查询一直失效：后来解决了，做如下记录：1、必须运行在服务器下2、hack条件语法，如下：<!--[iflteie9]><scriptsrc="js/html5shiv.min.js"></script><scriptsrc="js/respond.min.js">&l... 查看详情
px，rem，em通过媒体查询统一的代码(代码片段)
@mediaonlyscreenand(max-width:1080px),onlyscreenand(max-device-width:1080px)html,bodyfont-size:16.875px;@mediaonlyscreenand(max-width:960px),onlyscreenand(max-device-width:960px)html,bodyfont-si 查看详情
浅析响应式布局，rem布局,媒体查询布局(代码片段)
响应式什么是响应式布局响应式布局（respondlayout）是EthanMarcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑、手表，电视）——而不是为每个终端做一个特定的版本。这个概念... 查看详情
rem-移动前端自适应适配布局解决方案和比较(转载)
...方案：·固定一个某些宽度，使用一个模式，加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem淘宝最近开源的一个框架和网易的框架有同工之异。都是采用rem实现一稿解决所有设置自适应。在没出来这种... 查看详情
手机端适配方案媒体查询和flexbale
方法一 flexible一、npm包安装lib-flexible淘宝适配方案 px2rempx自动转remnpminstalllib-flexible--savenpminstallpx2rem-loader二、在main.js中引入lib-flexible**import‘lib-flexible/flexible.js‘三、配置build/utils.jsvarpx2rem 查看详情
媒体查询+rem用法(代码片段)
计算方法计算rem方法：结合媒体查询->随着设备的改变更改htmlfont-size的值。?媒体查询确定范围？？?移动端设计图：640px750px1080px;dpr223范围320px375px@mediascreenand(max-width:320px)htmlfont-size:12px;@mediascreenand(min-width:321px)and(max-width:375px)htm... 查看详情
关于移动端rem布局
...倍图、基础字体大小、图标宽高。解决方案的简单介绍:基于rem解决方案的简单介绍:基于rem给根节点设置一个基础值，然后 查看详情