在css中使用@media時騎行風格的樣式

因此，我有一個noob問題，一個令我惱火的問題。所以，我有以下類型樣式表：在css中使用@media時騎行風格的樣式

#content .post-content .row .col-md-6 .box-top { 
    background: #714f46; 
    padding: 10px; 
    color: #fff; 
    text-align: center; 
    font-family: "custom-script"; 
    position: relative; 
    height: 52px; 
    font-size: 34px; 
    padding-top: 12px; 
} 

@media (min-width: 960px) { 

} 

@media (min-width: 768px) { 
} 

@media (min-width: 640px) { 
    #content .post-content .row .col-md-6 .box-top { 
    width: 453px; 
    } 
} 

@media (min-width: 480px) { 
    #content .post-content .row .col-md-6 .box-top { 
    width: 353px; 
    } 
}

現在的問題是，任何超過641px將使用640px規則。即使屏幕是1920x1200。我認爲它是因爲我沒有爲原始元素定義寬度？如果多數民衆贊成的情況下，我一巴掌寬的453px原始的元素上：

#content .post-content .row .col-md-6 .box-top { 
    ... 
    width: 453px; 
}

但問題是，它幾乎像@media規則具有優先級，因爲在crhome檢查時，寬度爲1366px，它仍然使用規則的640px而不是我剛剛定義的寬度。現在我想到的是，而不是：(min-width: xyzpx)我會使用max-width，但這似乎採取了客戶需要的平滑縮小效果的方式，他們不希望它在介質大小之間跳動。

我的元素是否應該有max-width的453px來覆蓋@media規則？

#content .post-content .row .col-md-6 .box-top { 
    ... 
    max-width: 453px; /** or a min-width: 453px **/ 
}

基本上我的問題是：

爲什麼我的@media規則重寫頁面上的任何其他規則。在這種情況下，爲什麼它使用640規則中的寬度應用於上述任何元素，而元素的原始定義沒有指定寬度？

而且

爲什麼當我爲元素指定的那個原始定義的寬度，即@media規則，這在爲640px覆蓋定義了一個新的寬度它，尤其是當窗口寬度是說1366px ？

來源

2014-12-11 SeekingTruth

從我瞭解你的問題是，你要應用非移動的方法首先，並通過使用你必須使用在max-width代替min-width

這樣的：

/*========== Non-Mobile First Method ==========*/ 

    @media only screen and (max-width : 960px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (max-width : 768px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (max-width : 640px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (max-width : 480px) { 
     /*your CSS Rules*/  
    }  
    @media only screen and (max-width : 320px) { 
     /*your CSS Rules*/ 
    }

，或者如果你想使用移動第一種方法那麼你應該使用min-width但這種方式：

/*========== Mobile First Method ==========*/ 

    @media only screen and (min-width : 320px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (min-width : 480px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (min-width : 640px) { 
     /*your CSS Rules*/  
    } 
    @media only screen and (min-width : 768px) { 
     /*your CSS Rules*/  
    }  
    @media only screen and (min-width : 960px) { 
     /*your CSS Rules*/ 
    }

下面是從我的理解這一個片段是你在找什麼：

#content .post-content .row .col-md-6 .box-top { 
 
    background: #714f46; 
 
    padding: 10px; 
 
    color: #fff; 
 
    text-align: center; 
 
    font-family: "custom-script,arial"; 
 
    position: relative; 
 
    height: 52px; 
 
    font-size: 34px; 
 
    padding-top: 12px; 
 
} 
 
/*========== Non-Mobile First Method ==========*/ 
 

 
@media only screen and (max-width: 960px) { 
 
    /*your CSS Rules*/ 
 
} 
 
@media only screen and (max-width: 768px) { 
 
    /*your CSS Rules*/ 
 
} 
 
@media only screen and (max-width: 640px) { 
 
    #content .post-content .row .col-md-6 .box-top { 
 
    width: 453px; 
 
    } 
 
    /*your CSS Rules*/ 
 
} 
 
@media only screen and (max-width: 480px) { 
 
    /*your CSS Rules*/ 
 
} 
 
@media only screen and (max-width: 320px) { 
 
    /*your CSS Rules*/ 
 
}

<div id="content"> 
 
    <div class="post-content"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <div class="box-top">Something 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2014-12-11 01:45:38 dippas

使用您的移動第一種方法，請將樣式規則放入480，然後放入640，對於我而言，無論屏幕大小如何，總是使用480。你能解釋爲什麼會這樣嗎？ – SeekingTruth 2014-12-11 04:32:46

你可以創建一個小提琴，並告訴什麼是錯的，你想嘗試實現？ – dippas 2014-12-11 09:39:08

嘗試顛倒媒體查詢的順序。首先是最小的min-width。

說你的窗口寬度是700px。然後(min-width: 960px)和(min-width: 768px)不匹配並且被跳過，但是均爲(min-width: 640px)和(min-width: 480px)這些塊中的匹配樣式將被應用，以便它們出現在CSS文件中。而後來樣式覆蓋以前的風格，例如：

p { color: green; } 
p { color: red; }

你p顏色是紅色。

這個活生生的例子可能會更清楚一點：http://jsbin.com/yuqigedudi/1/edit?html,output

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <style> 
    /* Default color when no media queries bellow match. 
    In this our case when window width < 200px */ 
    p { color: black } 

    /* If window size >= 200px */ 
    @media (min-width: 200px) { 
     p { color: red } 
    } 

    /* If window size >= 300px */ 
    @media (min-width: 300px) { 
     p { color: orange } 
    } 

    /* If window size >= 400px */ 
    @media (min-width: 400px) { 
     p { color: blue } 
    } 
    </style> 
</head> 
<body> 
    <p> 
    Resize this frame and see my color change! 
    </p> 
</body> 
</html>

來源

2014-12-11 00:19:54

ç你提供任何解釋爲什麼會影響任何東西？此外，這並沒有做任何事情...... – SeekingTruth 2014-12-11 00:20:46

切換媒體像你在更新後的帖子中顯示的CSS也不起作用。我將所有不屬於媒體查詢的樣式放置在所有媒體查詢規則下（css是自頂向下的閱讀器），但問題仍然相同。如果我在480px的@media中定義了一些內容，它會保留481+而不是被覆蓋。 – SeekingTruth 2014-12-11 00:33:49

這仍然不適用於我，你的榜樣，但我的事情不。雖然 – SeekingTruth 2014-12-11 01:17:40

在css中使用@media時騎行風格的樣式

回答

相關問題