2013-03-27 212 views
5

我有這樣的HTML和CSS代碼:力媒體查詢

<div class="wrapper"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 

@media all and (max-width: 400px), (max-height: 300px) { 
    .wrapper .a { 
     .... 
     .... 
    } 
    wrapper. .b { 
     .... 
     .... 
    } 
    .... 
    .... 
} 

現在我想,只要包裝獲取類「像小」,所有款式的小屏幕會即使申請屏幕不小。我不想在媒體查詢中複製CSS代碼。我該如何解決這個問題?

另一種解決方法是強制媒體查詢應用。有什麼辦法可以做到嗎?

+0

也許與[*少*](http://lesscss.org)。 – 2013-03-27 09:39:30

+0

@JaredFarrish:即使使用較少的sass或手寫筆,渲染後的css也會被複制。 – Naor 2013-03-27 10:05:20

+0

有趣的問題是,它僅用於調試目的嗎? – zessx 2013-03-27 11:14:50

回答

-1

爲這些部分添加相同的類。

<div class="wrapper"> 
    <div class="makeMeShine a"></div> 
    <div class="makeMeShine b"></div> 
</div> 

其中A和B可以有自己的自定義樣式:)

+0

什麼是「makeMeShine」?這與媒體查詢有什麼聯繫?.. – Naor 2013-03-27 10:06:31

+0

makeMeShine只是我添加的一個類。例如.makeMeShine {background:red; }。在應用makeMeShine類的地方,你會有背景紅色。 – 2013-03-27 11:25:51

+0

這與媒體查詢有什麼關係??? – Naor 2013-03-27 13:13:16

0

在Chrome中的新版本,你可以"emulate" a mobile device以觸發/在桌面瀏覽器中測試你的媒體查詢。 (Internet Exploder 11 has the same behavior!)您可能必須在應用仿真後刷新瀏覽器; Chrome 35仍然會部分應用媒體查詢,直到我在關聯的標籤中進行刷新。

0

你可以用一點javascript做這樣的事情。

簡而言之,您會將媒體查詢移出CSS,並使用window.matchMedia在JS中測試它們。

當您知道哪一個匹配時,您可以將類名添加到<html>標記,類似於Modernizr的工作方式。所以在手機上你會看到<html class="like-small">

你的CSS將被寫入採取這些便利類的優勢,而不是使用本地媒體查詢:

.like-small wrapper.a {} 
.like-large wrapper.a {} 

(我也想補充。不樣小。不 - 喜歡 - 中級到<html>,以進一步簡化css)

因此,現在,在常規媒體查詢匹配並且相應的類名被附加到文檔後,RWD的工作方式幾乎與正常一樣。如果你想強制一個特定的風格,你可以重寫HTML標籤上的classNames來影響整個頁面,或者添加一個className到任何父元素來隻影響部分頁面。

0

我知道這個問題很舊,但希望這是你正在尋找的(因爲沒有答案)。而且我也不知道向您的CSS添加特定類是否違反了您不要重複CSS的要求。

您可以通過更改您的@media查詢的定義來實現您想要執行的操作。基本上,並不是說當屏幕變得小於某個值時想要發生某些事情,請保持媒體查詢的小屏幕出現在屏幕上,併爲更大的屏幕設置媒體查詢。

然後,您只需更改您調用CSS的順序,併爲要調用類like-small的類型添加特異性。

HTML:

<div class="wrapper like-small"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 


<div class="wrapper"> 
    <div class="a"></div> 
    <div class="b"></div> 
</div> 

CSS:

.wrapper.like-small .a, 
.wrapper .a { 
     height:200px; 
     width:200px; 
     background:purple; 
    } 

.wrapper.like-small .b, 
    .wrapper .b { 
     height:200px; 
     width:200px; 
     background:blue; 
} 

@media all and (min-width: 400px), (min-height: 300px) { 
    .wrapper .a { 
     height:100px; 
     width:100px; 
    background:yellow; 
    } 
    .wrapper .b { 
     height:100px; 
     width:100px; 
    background:red; 
    } 
} 

和提琴:http://jsfiddle.net/disinfor/70n37hhj/

希望這是你以後有什麼(在一年半前:)

0

您可以使用javascript來嘗試。這句話將視口的寬度和力量的瀏覽器應用您的媒體查詢:

$('meta[name="viewport"]').prop('content', 'width=400'); 

這是從這個答案採取: https://stackoverflow.com/a/20137580/1401341 正如有人在評論中說,這將只與支持viewport標籤瀏覽器。