Question

...嗨

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

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

现在，虽然我可以使用我的JS技巧来扩展和缩小应用程序（字体等），但是总体布局保持不变，因为媒体查询没有变化。这显然使一切看起来都有些扭曲。

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

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

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

编辑：

似乎我没有充分强调一个关键问题：MQ需要在客户端进行更改。如上所述，应用程序需要在任意大小的壁挂式电视屏幕上运行，因此虽然它们可能都具有HD或HD-ready分辨率，但PPI变化很大，并且是获得适当设计规模的唯一方法，是解决问题并将其扩展到适合app配置。只需要使用普通的ol＆＃39; MQ不会削减它。

Answer 1

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

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

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

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

REM。相对于根元素em大小的大小。这意味着无论文档的基本字体大小如何，一切都与此相关。如果基本字体大小为16px并且您设置为1.5rem，那么它将是24px; 1.5 x 16px。这在添加辅助功能并允许用户自己增加字体大小时非常理想。

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，因为当你没想到它时，你可以很快地找到缩放的东西。

如何扩展媒体查询？

1 个答案: