如何永远避免媒体查询？答案

【问题标题】：How to Avoid Media Queries Forever?如何永远避免媒体查询？
【发布时间】：2014-10-02 03:14:52
【问题描述】：

我不喜欢媒体查询，我认为这是一个糟糕的主意。

我想为手机制作一个应用程序。所以我的应用程序在所有情况下看起来都一样，但我要做的只是为不同的屏幕重新调整应用程序。就是这样！

现在我不喜欢 EM，也不喜欢百分比宽度。所有这些想法听起来都很糟糕。我喜欢 VW/VH http://caniuse.com/#feat=viewport-units 但 ios safari 还不支持这个。

所以我的另一个想法是制作一个基于像素的静态应用程序。例如，考虑一个高度为 400 像素 x 400 像素的计算器。其他一切都以像素为单位。

我可以接受这个，并设置一个适合我的静态内容但将其拉伸到视口大小的视口吗？我认为这是可能的，因为视口支持缩放，不是吗？

【问题讨论】：

【解决方案1】：

只需将其添加到您的 head 标签中：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

...然后对所有容器元素使用 width:100% 样式。

编辑：您“不喜欢”百分比的事实。不过，它可以解决您的问题。

【讨论】：

400px 是 400px。而已。您可以通过更改比例来缩放页面，但它永远不会在两侧正确拉伸。百分比是最好的情况。您还应该使用'box-sizing:border-box;'这样您就不会遇到百分比和边距/填充/边框的任何问题。
百分比是邪恶的，因为你需要处理父/子关系。所以孩子的 100% 宽度与它的父母有关。我需要 vh/vw。啊，我讨厌我的生活。
不要挑剔，学习如何使用所有命令。这不是“你喜欢什么”的问题。你可能不喜欢锤子，但它是唯一可以用来在木头上钉钉子的工具。而已。在我的回答中也提到了您用作自己的“答案”的内容，您可以使用比例尺。但是使用 js，做纯 css 可以做的事情会导致性能显着下降
这不是要挑剔，而是要理解当前的 css/html 调整大小的方式很糟糕。这就是 vh/vw 试图解决的问题，但在移动设备上效果不佳，现在这很有趣。 em、百分比、像素、媒体查询、视口——所有这些对于移动应用来说都是一堆垃圾。

【解决方案2】：

找到了我要找的东西

特别是 Bren1818 的答案，他以编程方式计算视口的初始比例。虽然我也不确定我是否喜欢这个答案...希望 vh/vw 单位已经进入移动设备。

【讨论】：