如何扩展媒体查询？

Question

喂...

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

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

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

我需要的基本上是能够将缩放因子应用于我的媒体查询中的限制。

我意识到一种解决方法是更改​​屏幕宽度的元标记，但这是行不通的，因为我们需要设备像素 = 实际像素才能获得最干净的渲染（许多 Android 的像素比看起来很模糊，例如 1.75） .

我已经研究过在媒体查询中使用 calc(..)（不起作用）。当我使用 Ember 时，我可以访问所有模板和内容。我正在考虑在 JS 中计算所有内容并将其推入 STYLE 标记中的 DOM 中，但是有大约 100 个媒体查询，我想它会变得很痛苦......并且让我在周末远离啤酒...... . 所以这是我起草的...没有双关语...

编辑：

似乎我没有足够强调一个关键问题：MQ 需要在客户端是可变的。如前所述，应用程序需要在任意尺寸的壁挂式电视屏幕上运行，因此虽然它们可能都具有 HD 或 HD-ready 分辨率，但 PPI 变化很大，这是获得适当设计规模的唯一方法，是启动这​​个东西并对其进行缩放以适应应用程序配置。仅仅使用普通的 MQ 是不行的。

Answer 1

根据我的评论的积极反馈，我创建了这个答案，以帮助人们查看这个问题。

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

为了获得最佳的跨设备兼容性和可扩展性，应使用以下单位：

%。要测量的屏幕百分比。例如100% 是屏幕的 100%，50% 是屏幕的一半，以此类推。相当直截了当。

雷姆。相对于根元素 em 大小的大小。这意味着无论文档的基本字体大小是什么，所有内容都会与之相关。如果基本字体大小是 16 像素，而您将某些东西设置为 1.5rem，那么它将是 24 像素； 1.5 x 16 像素。这是添加辅助功能并允许用户自己增加字体大小的理想选择。

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，因为您会发现事情的扩展速度非常快，而您却没有预料到。