当你周围的每个人正在做一些你通常认为是错误的事情（或者至少不是很理想）的时候，你有没有感到奇怪，但是不管怎么说，似乎没有人会因为某种原因而发表任何意见？看到每个人都对不幸的观察者做出最好的印象是一种非常奇怪的感觉。这让我想起了那位古老的寓言，“皇帝的新衣”。
我总是感觉到css媒体查询的方式。为什么大家只是接受一项似乎没有完成工作的技术呢？为什么我们作为一个社区没有一个人真正有意义的融合在一起呢？为什么我们没有想到更好的东西？
今天，css媒体查询恰好恰好是响应式网页设计的功能基础。但是，从来没有为每个人今天使用它而设计，而且证明是在实践中。当使用平板电脑设备时，我仍然经常在网站上绊倒，这个平板电脑首先看起来设计精美，但是当您把它们放在脚步上时，只会发生在看起来和感觉彻底。
这种反应性网页设计的方法根本没有解决，我们还没有正确解决，我想成为少数几个声音，在这个声音中称之为他的裸体。幸运的是，在这个时代，我很高兴有这个替代观点被焚烧的机会几乎为零。
css媒体查询有什么错？css媒体查询是针对某些东西而设计的，但是这并不是响应式的网页设计。根据我的经验，这里有七（7）个大问题，我试图使用它们来处理网站时遇到的问题：
不直观：“css媒体查询是直观的”，没有网页设计师说。您定义媒体查询的方式非常简单，但并不总是完全清楚在实际的浏览器，实际设备以及无数场景中播放的内容。
上述代码在320到480像素之间适用于视口。但是，当您想要做更具体的操作时，如果在平板电脑上进行横向操作，则应用样式规则，这并不完全确定[或直观]。设置媒体查询是不可能做到这一点，但绝对不是直观的 – 或者是明确的。
2.有限条件：css媒体查询是动态的，您可以在css 中定义条件语句。例如，如果视口在这之间，那么做另一个。但是，您主要限于视口注意事项，还有更多的条件情景在现代网页设计中是有意义的。
网站制作
说你正在建立一个渐进的网络应用程序。有时候，根据操作系统不同地设计某些ui元素是有用的。例如，通常情况下，ios设备底部的标签栏位于底部，而对于android则是相反的。那么，你如何才能使用css媒体查询？
你不能，因为css媒体查询并没有任何功能可以让你。此外，您可能需要通过css进行许多其他定制，但是当您需要不同程度的简单到高级条件时，媒体查询不是一种选择。
3.不可本地扩展：css媒体查询是浏览器中的功能。这意味着它不是可扩展的。换句话说，您无法通过css界面本机向css媒体查询添加额外的增强功能。
即使新的css媒体查询功能被[长期忍受]网络标准流程批准，在这些功能因无所不在而变得可用之前，仍然需要时间。此外，并非所有添加的功能都可能对您有所帮助，因此，如果您没有获得所需的内容，您可以随时找出其他方法来解决您的具体挑战。
当然，有一种扩展css的方法，但是您必须真正了解javascript，而且这对大多数网页设计者来说并不是一个实际的过程。
4.不适合改装：有些人可能会觉得这很难相信，但在移动设备出现之前，实际上有很多网站，并没有一个是移动友好的。因此，这些桌面时代的网站需要升级。
不幸的是，css媒体查询对于这个任务来说不是很好的选择。由于这些网站是在移动设备相关之前建成的，所以很多设计元素都不适用于反馈式网页设计，例如边栏，基于桌面的布局，标签内容等。此外，这些网站中有相当一部分建立在像wordpress，drupal，magento等内容管理系统（cms）的基础上，从后端有效整合css媒体查询（前端）是非常难以协调的。
我不得不改造由magento enterprise，wordpress以及使用基于coldfusion的自定义cms的网站，所有项目都将彻底无法使用css媒体查询（这是我所有客户在使用我们的替代方法之前尝试过的]。
不代码效率：使用css媒体查询使网页响应需要大量代码乘法。由于这些指令的工作方式[使用断点]，您必须在每个媒体查询块中定义单个样式规则。
在写上面的代码时，我的初衷是使<section>我的页面上的元素在所有移动设备中流动[宽度为100％]。然而，由于我没有本机的设备检测能力，我必须在每个面向移动的css媒体查询块中妥协并定义一个风格规则，以确保新的属性将适用于所有相关的场景。
这意味着样式表级联的功能效率以及不要重复自己的良好开发原则必须占据一席之地。
section {width: 960px;}
/* portrait */@media only screen and (min–device–width: 320px) and (max–device–width: 480px) and (-webkit–min–device–pixel–ratio: 2) and (orientation: portrait) { section {width: 100%}}/* landscape */@media only screen and (min–device–width: 320px) and (max–device–width: 480px) and (-webkit–min–device–pixel–ratio: 2) and (orientation: landscape) { section {width: 100%;}}6.提高工作流程复杂性：css媒体查询仅处理响应式网页设计的一个非常具体的方面，几乎完全专注于布局调整大小。ergo，做更多的事情，你必须依靠javascript来弥补差异。这为代码和工具引入了额外的学习要求。
此外，[媒体查询]处理断点的非确定性方式意味着您必须花费更多时间[和金钱]在许多虚拟和/或物理设备中测试您的网页，以确保事情按原来的方式工作。而且，当您对布局进行任何重大更改时，您需要重新测试所有内容。
通过使用css媒体查询的简单有目的的操作，您可以显着增加构建现代网页所需的步骤数量。
7.表现不佳：由于css媒体查询工作的方式，您将需要更多的css代码，而不是使您的网站响应/移动设备适合。根据httparchive.org的数据，过去五年，css文件大小增加了114％。同一时期，html文件大小的增加达到了53％。
这种特殊情况对您的网站具有性能影响，因为在实际的css媒体查询（在响应式网页设计环境中）比以往更难，特别是对于使用不太理想的移动宽带网络的移动设备而言，这将会更慢。
而且，除了增加文件大小的问题外，css媒体查询中没有内部机制来实际提高网页的性能。为此，您将不得不利用高级javascript技术来实现这些增强功能。
为什么还在使用这个？如果我问你有多少网站使用css媒体查询，你的答案是什么？随着网页设计师多年来一直忍受的压力，您可能会认为我们现在可能已经得到了采用驼峰，但是你会是错误的。
在使用css媒体查询网站的比例在整个网络是约0.2％。相比之下，使用jquery的网站百分比为18％。这意味着你的jquery能力超过了您的网站的90倍，而不是一个敏感的网站[不包括那些恰恰相反的网站]。
为什么一些基于核心技术（javascript）的工具包，某些人似乎认为是复杂和多余的，远远超过了似乎不那么复杂[css]的一个，意在解决一个可以说是更重要的问题[移动友好性] ？显然，这里严重错误是妨碍采用，需要加以解决。
css媒体查询发现，它是进入网络浏览器来处理一个特定的挑战，但是它被草拟起来，以承载其肩膀上的响应式网页设计的整体重量。这就像练习三年级录音师，只能神奇地运送到皇家阿尔伯特音乐厅，以呈现亨德尔弥赛亚的长号独奏; 不公平
在现代网页设计的所有挑战，我们仍然在这个媒体查询业务是非常令人惊讶的。除了一些新的领域，如渐进式网络应用设计，还有一些重要的遗留问题并不足够。因此，我认为现在是时候提出一个替代方案。但是，究竟是什么呢？
解决办法是什么？所有这一切的解决方案真的很简单：javascript。现在，在你拿起干草叉之前，给我一个解释的机会。
javascript是html5三位一体的唯一组件，其中可扩展性不是肮脏的单词。您不能使用更多的html扩展html标记，并且您确定使用css本身无法扩展css。但是，您可以使用javascript本机扩展javascript，甚至可以对css执行相同的操作。
在w3c的web标准课程中广泛讨论了使用javascript操作css。该document.stylesheetsdom接口使我们能够访问应用到网页，包括使用html的引用的所有外部样式表的样式表<link>标签。这不是一件容易的事情，但这是可能的。
所以我应该扩展最初的答案：它不只是javascript，它是javascript辅助的css。javascript是一个令人敬畏的平台，具有您不会相信的功能，但css是大多数网页设计师的工作。如果我们可以以某种方式在这两者之间创建一些功能桥梁，网页设计人员可以编写一个css规则集来利用javascript功能，这将有点像网页设计的改变游戏规则。
给我看一些代码在过去的两年左右，我一直在研究一