如何扩展媒体查询？

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

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

现在，虽然我可以使用JS技能来调整应用程序（字体等）的大小，但总体布局保持不变，因为媒体查询不变。这显然使一切看起来有些扭曲。

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

我意识到解决方法是更改屏幕宽度的元标记，但这是一个不行，因为我们需要设备像素=最清晰呈现的实际像素（许多Android看起来像素比例模糊，例如1.75 ）。

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

编辑：

好像我没有强调的一个关键问题就够了：在MQS必须更换客户端。如前所述，应用程序需要在任意大小的壁挂式电视屏幕上运行，因此虽然它们可能都具有HD或HD分辨率，但PPI差异很大，并且是获得适当设计规模的唯一方法，就是将这些东西放在一起并将其缩放以适应应用程序配置。只要用简单的'MQ'就不会削减它。

来源

2015-05-15 Coolheinze

您的测量单位是像素还是更像em，rem和％？ – gabe3886

这听起来像一个一般的响应式设计问题。我不会用这样的JavaScript做任何事情，因为Sass/CSS可能会提供所有你需要的工具。可能有用的一个小改进是响应式元素，它实际上是一个使用JavaScript的框架，但无论如何可能是标准的一天，而且您不必自己使用JavaScript，请参阅http://kumailht.com/responsive -elements /。 – mahemoff

@ gabe3886这应该是这个问题的答案。 'em'或'ch'中的媒体查询工作得很好，非常适合这种情况。 –

继我评论的积极反馈之后，我创建了这个答案来帮助人们查看此问题。

当创建需要从小型设备扩展到大型屏幕的应用程序或网站时，最好使用易于扩展的测量单位。这意味着要避免在你的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的仔细，你可以找到的东西缩放非常迅速的时候你没有料到它。

来源

2015-05-15 22:20:13 gabe3886

@MrLister谢谢你。现在的习惯比什么都重要。我纠正了它。 – gabe3886

非常感谢您的回应！：o）我只在我的CSS中使用像素：html标签字体大小。其他所有东西都是em，rem或％。我可以轻松扩展和缩小。但是当我扩大规模时，我基本上将屏幕缩小 - 而实际上并没有缩小屏幕尺寸。所以，MQ不会抬起手指，因为它们在屏幕像素大小上触发，当我缩放事物时它不会改变。将像素比例混合到MQ中不会削减它，因为必须将它设置为1才能在某些设备上呈现最佳效果。我天真地在MQ中尝试了rem，这显然不起作用，因为它们被固定在默认大小。 – Coolheinze

如何扩展媒体查询？

回答

相关问题