CSS媒体查询错误

当你周围的每个人正在做一些你通常认为是错误的事情（或者至少不是很理想）的时候，你有没有感到奇怪，但是不管怎么说，似乎没有人会因为某种原因而发表任何意见？看到每个人都对不幸的观察者做出最好的印象是一种非常奇怪的感觉。这让我想起了那位古老的寓言，“皇帝的新衣”。

我总是感觉到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;}

1. /* Portrait */
2. @media only screen and (min–device–width: 320px) and (max–device–width: 480px) and (-webkit–min–device–pixel–ratio: 2) and (orientation: portrait) {
3. section {width: 100%}
4. }
5. /* Landscape */
6. @media only screen and (min–device–width: 320px) and (max–device–width: 480px) and (-webkit–min–device–pixel–ratio: 2) and (orientation: landscape) {
7. section {width: 100%;}
8. }

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功能，这将有点像网页设计的改变游戏规则。

给我看一些代码

在过去的两年左右，我一直在研究一种名为rKit的JavaScript辅助CSS工具包。整个想法是建立一个设计师友好的工具，不仅仅是替换CSS媒体查询以实现响应式网页设计，而是解决网页设计师/开发人员在构建现代网站和webapps时面临的一些已知的[和未知]挑战。

这个概念有很多，但下面是一个简单的CSS代码片段来解释：

1. ＃my-element [rk =“if @ viewport.width between 320 and 480”] {background-color：＃0000ff;}

使用rKit，CSS规则看起来像修改的属性值选择器。然后可以在值段内定义一个表达式。此表达式的语法设计为简单直观。

注意：rk是一个常量属性标识符。

上面的代码在功能上等同于下面的CSS媒体查询：

1. @media only屏幕和（最小– 设备– 宽度：320像素）和（最大– 设备– 宽度：480像素）{
2. ＃my-element {background-color：＃0000ff;}
3. }

然而，还有更多的你可以使用rKit。这是另一个快速的例子：

1. ＃my-element [rk =“if @ self.width between 320 and 480”] {background-color：＃00ff00;}

通过简单地从改变实体引用@viewport到@self，我们已经基本上建立了通常被称为元素查询。那么现在发生的是当宽度#my-element 在320和480像素之间时，给定的声明[ background-color: #00ff00]将适用。

您也可以使用类而不是纯声明：

1. ＃my-element [rk =“if @ self.width between 320 and 480 then addClass（c_mobile_320）”] {}
2. 。c_mobile_320 { background – color ：＃00ff00;}

这只是冰山一角。使用rKit，您可以做一些非常棒的事情，例如事件管理，突变观察，数量查询，路由，数据绑定[最多7路]，以及一些其他酷的东西，所有这些都使用纯CSS代码，无需编写一行JavaScript。

rKit在启动时将是免费的和开源的。此外，它还将运行一个特殊的性能包，您可以以保证零渲染阻止的方式进行安装，因此网页像轨道上的火箭一样加载。

把它放在一起，花了相当长的时间，但很快就会在这里（Godot先生），而且我真的很想看看网页设计师（和开发人员）能够做什么。

结论

我希望你不要离开这个帖子，认为我正在打击CSS媒体查询，因为。我不是。那就像把西红柿打成水果沙拉一样。就像我刚才所说，CSS媒体查询从未设计用于响应式网页设计。考虑到权宜之计，我们都试图用它来解决所有的问题。

可悲的是，作为一个网络社区，我们并没有真正地通过改进这一重要方式来纠正这个初始错误，或者提出了一个更好的选择。但唉，展示必须继续下去，网站必须建成，进度必须胜过。现在是改变的时候了

rKit只是一个选择和一个答案。这不是第一个，绝对不会是最后一个。但是，至少这是朝正确方向迈出的正确一步。解决一些过去的问题的机会，然后再重新修复现在和未来的问题。看到它如何与现状相匹配是很有趣的。

所有收费，出错都不是目的; 应该是一个学习的经验。祝你好运，我们将学习如何使用正确的工具下一个正确的工作。我的意思是说，只是因为你可以在一条铺好的路上骑自行车，这并不意味着你应该把它带到纽博格林。带来保时捷！