如何擴展媒體查詢？

我正在做一個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

如何擴展媒體查詢？

回答

相關問題