Javascript 如何扩展媒体查询？

喂

我正在做一个余烬应用程序，我需要能够缩放布局，因为它有时需要显示在大面板上，我无法获得像素比例。（哦，一直到iPhone屏幕……）

所以，我的问题是： 我已经使整个事情完全可扩展和漂亮，但我也需要在这里和那里使用一堆媒体查询

现在，虽然我可以使用JS skillz上下缩放应用程序（字体等），但总体布局保持不变，因为媒体查询保持不变。这显然让一切看起来都有些扭曲

我所需要的基本上是能够在我的媒体查询中对限制应用缩放因子

我意识到一个解决办法是更改屏幕宽度的元标记，但这是不可能的，因为我们需要设备像素=实际像素以获得最干净的渲染效果（许多机器人的像素比看起来模糊，例如1.75）

我已经看过在媒体查询中使用calc（..）的情况（不起作用）。当我使用Ember时，我可以访问所有模板和内容。我一直在考虑用JS计算所有内容，然后用样式标签将其放入DOM中，但是有大约100个媒体查询，我想这会很痛苦。。。让我周末不喝啤酒。。。所以我来起草。。。没有双关语的意思

编辑：

---

似乎我还没有充分强调一个关键问题：MQs需要是可变的客户端。如前所述，该应用程序需要在任意大小的壁挂式电视屏幕上运行，因此，虽然它们可能都具有HD或HD就绪分辨率，但PPI变化很大，要获得适当的设计规模，唯一的方法是启动该应用程序，并将其缩放以适应应用程序配置。仅仅使用普通的ol'MQs并不能解决问题。

根据我的评论中的积极反馈，我创建了这个答案，以帮助人们从根本上看待这个问题

当创建需要从小型设备扩展到大屏幕的应用程序或网站时，最好使用易于扩展的度量单位。这意味着避免在CSS中使用

px

应使用以下装置以实现最佳的跨设备兼容性和可扩展性：

%。要测量的屏幕百分比。e、 g.

100%

是屏幕的100%，

50%

是屏幕的一半，依此类推。相当直截了当

rem.相对于根元素em size的大小。这意味着，无论文档的基本字体大小如何，所有内容都会相应地进行缩放。如果基本字体大小是16px，并且您将某个值设置为1.5rem，那么它将是24px；1.5x16px。这是添加辅助功能和允许用户自己增加字体大小时的理想选择

em（事情可能变得复杂）。这是相对于直接父容器字体大小的大小。它类似于rem（见上文），但会随着结构的深入而倍增

假设以下css：

html {
    font-size : 16px;
}

div {
    font-size : 1.5em;
}

当我们将其与嵌套div相结合时，事情可能会变得令人沮丧：

<div>
    <!-- font-size is 24px !-->
    <div>
        <!-- font-size is 36px !-->
        <div>
            <!-- font-size is 54px !-->
        </div>
    </div>
</div>

---

仔细使用

em

，因为你会发现在你没有预料到的情况下，事物会迅速扩展。

你的测量单位是像素，还是像em、rem和%？这听起来像是一个一般的响应性设计问题。我不会对像这样的JavaScript做任何疯狂的事情，因为Sass/CSS可能提供了您需要的所有工具。一个可能有用的小改进是responsive elements，它确实是一个使用JavaScript的框架，但总有一天会成为一个标准，您不必自己使用JavaScript—请参阅。@gabe3886这应该是这个问题的答案。

em

或

ch

中的媒体查询非常有效，非常适合这种情况。同意@mahemoff和Mr Lister。确定你的布局在什么维度上分解，并为这些边界编写媒体查询。谢谢你们，但它仍然不能解决这个问题。我确实使用了不运行客户端的，所以它仍然让我陷入泥潭，因为我需要扩展运行时（请参见编辑）。很明显，我确实使所有东西都具有可伸缩性，除了MQs之外，根本没有在CSS中使用px（在IMHO中，MQs非常严格，设计很差，但这是另一回事）。由于面板非常愚蠢，我不能使用任何像像素比率这样的奇特的MQ东西。唯一的方法是手动调整-这需要客户端解决方案。我可以少用一点，但由于我们已经在使用SASS，这将使代码库变得非常复杂，这是不可能的。@MrLister谢谢你。这是一种习惯，而不是现在的任何东西。我已经更正了。非常感谢您的回复！：o） 我在CSS中只使用了一次像素：html标记字体大小。其他一切都是em、rem或%。我可以很容易地放大和缩小。但是当我放大屏幕时，我基本上是把屏幕变小了，而实际上并没有把它变小。因此，MQs不会动手指，因为它们会触发屏幕上的像素大小，当我缩放时，像素大小不会改变。将像素比率混合到MQs中并不会减少它，因为必须将其设置为1，以便在某些设备上获得最佳渲染效果。一、 天真地，在MQs中尝试rem，这显然不起作用，因为它们被固定在默认大小。