如何擴展媒體查詢？

Question

嗨...

我正在做一個Ember應用程序，我需要能夠縮放布局，因為有時需要在無法獲得像素比率的大面板上顯示它。 （呵呵，一路下跌到iPhone的屏幕，以及...）

所以，這是我的問題：我已經使整個事情變得完全可擴展且花哨，但我確實需要在這里和那里使用大量媒體查詢。

現在，盡管我可以使用JS Skillz上下縮放應用程序（字體等），但總體布局保持不變，因為媒體查詢不變。 顯然，這使所有內容看起來都有些失真。

我基本上需要的是能夠對媒體查詢中的限制應用比例因子。

我意識到一種解決方法是更改​​屏幕寬度的meta標簽，但這是不行的，因為我們需要設備pixel =實際像素才能進行最清晰的渲染（許多Android的像素比看起來很模糊，例如1.75）。

我看過在媒體查詢中使用calc（..）（不起作用）。 在使用Ember時，我可以訪問所有模板和內容。 我正在考慮在JS中將其全部計算出來並以STYLE標簽將其推入DOM的思路，但是通過大約100個媒體查詢，我想它會變得很痛苦...並且在周末避免我進來。所以這是我起草...沒有雙關語...

編輯：

似乎我沒有足夠強調一個關鍵問題：MQ必須在客戶端可更改。 如前所述，該應用程序需要在任意尺寸的壁掛電視屏幕上運行，因此盡管它們可能都具有高清或支持高清的分辨率，但PPI卻相差很大，這是獲得適當設計尺寸的唯一方法，是將事物放火並縮放以適合應用程序配置。 只使用普通的MQ並不會減少它。

Answer 1

收到我的評論的積極反饋后，我創建了此答案，以幫助人們從頭到尾查看此問題。

創建需要從小型設備擴展到大屏幕的應用程序或網站時，始終最好使用易於擴展的度量單位。 這意味着避免在CSS中使用px 。

以下單元應用於最佳的跨設備兼容性和可伸縮性：

％。 要測量的屏幕百分比。 例如100%是屏幕的100％， 50%是屏幕的一半，依此類推。 非常坦率的。

REM。 相對於根元素em大小的大小。 這意味着無論文檔的基本字體大小是多少，所有內容都相對於它進行縮放。 如果基本字體大小為16px，而您將其設置為1.5rem，則它將為24px； 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 ，因為您會發現在不期望的情況下擴展很快。