的類型不是其他東西使用EM的響應風格

有時候我嘩嘩我可以只改變一個變量在媒體查詢和的類型不是其他東西使用EM的響應風格

HTML：

<div id="wrap"> 
    <div class="child1"></div> 
    <div class="child2"></div> 
</div>

以下（不工作）：

@base: 1000px; 

@media all and (max-width: 768px) { 
    @base: 600px; 
} 

.child1 { 
    // 500px normally, 300px on small screens 
    height: 0.5 * @base; 
} 
.child2 { 
    // 250px normally, 150px on small screens 
    height: 0.25 * @base; 
    }

那當然沒有在編譯時間，因爲工作，@base設置並應用於所有CLASSE秒。

LESS：不過，我碰到這個骯髒的解決辦法來

#wrap 
    { 
    font-size: 1000px; 
    @media all and (max-width: 768px) { 
     font-size: 600px; 
    } 
    .child1 { 
     // 500px normally, 300px on small screens 
     height: 0.5em; 
    } 
    .child2 { 
     // 250px normally, 150px on small screens 
     height: 0.25em; 
     } 
    }

假設我實際上沒有任何文字在我的元素（或文本只發生在葉節點，將它們的字體大小明確），使用這種方法是否存在嚴重的缺點？

來源

2013-02-15 Manuel Ebert

我不確定我是否真的理解了你的問題，但爲什麼你在「正常」CSS之前聲明你的媒體查詢？我會建議你先開始移動，這意味着你從小屏幕的設計開始，然後上升。 – Sven 2013-02-15 22:15:27

「移動優先」實際上並沒有改變方法。問題在於使用em單位來設置框和媒體查詢的大小以更改整個元素子樹的字體大小是否安全。 – 2013-02-15 22:36:18

我不能證實某些問題，但是建議的em方法對我的口味來說似乎太過冒險（並且它不會使編碼器容易確定元素的高度）。我會建議使用的媒體查詢，因爲他們的目的是使用，而只是建立一個mixin得到的值，就像這樣：

LESS

@base: 1000px; 
@smallBase: 600px; 

.childHeights(@base) { 
    // 500px normally, 300px on small screens 
    .child1 { 
    height: 0.5 * @base; 
    } 
    // 250px normally, 150px on small screens 
    .child2 { 
    height: 0.25 * @base; 
    } 
} 

@media all and (max-width: 768px) { 
    .childHeights(@smallBase); 
} 

.childHeights(@base);

CSS輸出

@media all and (max-width: 768px) { 
    .child1 { 
    height: 300px; 
    } 
    .child2 { 
    height: 150px; 
    } 
} 
.child1 { 
    height: 500px; 
} 
.child2 { 
    height: 250px; 
}

來源

2013-02-19 19:42:27 ScottS

的類型不是其他東西使用EM的響應風格

回答

相關問題