帶背景圖像的div與媒體查詢不匹配

Question

page in quesstion。我有一個棋盤，每個單元格都是一個div。我希望董事會使用媒體查詢擴大某些最小寬度，但它並沒有這樣做。

單元格由ngFor循環生成。黑色單元是b類，白色單元是w類，板外的填充單元（用於間隔）是e類。 我正在改變媒體查詢中這些div的填充和背景大小。

當我重新調整瀏覽器時，媒體查詢正確地移動我的菜單div。但它並沒有改變背景圖像和填充到e，b和w div。

董事會可以在沒有媒體查詢的情況下設置爲這些新維度時進行渲染，因此看起來好像媒體查詢不起作用。

這裏是CSS與媒體查詢塊：

.b{ 
    float: left; 
    border-width: 2px; 
    border-style: solid; 
    border-color: #a5a5a5; 
    background-color:  #686868 ; 
    background-size: 23.2px 23.2px; 
padding: 10px; 
} 
.w{ 
    float: left; 
    border-width: 2px; 
    border-style: solid; 
    border-color: #a5a5a5; 
background-color: #e5e5e5; 
    background-size: 23.2px 23.2px; 
padding: 10px; 
} 
.board{ 
width: 100%; 
display: flex; 
padding: 10px; 
} 
.menu { 
    width: 100%; 
    order: 1; 
    } 
    .rewind{ 
    padding: 10px; 
    } 
@media (min-width: 1100px) { 
    .menu { 
    order: 1; 
    width: 25%; 
    } 
    .board { 
    order: 0; 
    width: 75%; 
    } 
    .e{ 
    background-size: 43.2px 43.2px; 
padding: 20px; 
    } 
    .b{ 
    background-size: 43.2px 43.2px; 
padding: 20px; 
    } 
    .w{ 
    background-size: 43.2px 43.2px; 
padding: 20px; 
    } 
} 

@media (min-width: 420px) { 

    .e{ 
    background-size: 33.2px 33.2px; 
padding: 15px; 
    } 
    .b{ 
    background-size: 33.2px 33.2px; 
padding: 15px; 
    } 
    .w{ 
    background-size: 33.2px 33.2px; 
padding: 15px; 
    } 

} 

平臺：所有的瀏覽器，並使用角1.5.8，3.3.7引導

Answer 1

有一個在你的CSS file一個錯字在網站上（不在上面的代碼片段中）。

CSS類在這裏需要的字母前階段，而不是之後。

大版的板時，這個改變看起來不錯。這是否解決了這個問題？

@media (min-width: 420px) { 

    e.{ 
    background-size: 43.2px 43.2px; 
padding: 20px; 
    } 
    b.{ 
    background-size: 43.2px 43.2px; 
padding: 20px; 
    } 
    w.{ 
    background-size: 43.2px 43.2px; 
padding: 20px; 
    } 
}