CSS媒體查詢問題

Question

我有一個問題，我以前沒有使用媒體查詢。我主要在Chrome和Opera中的移動設備上使用這個問題，但在Safari和Firefox中沒有這個問題。

我有一個按鈕，其display屬性設置爲none設備的屏幕超過769px，默認設置爲inline-block。但對於屏幕小於769像素的設備，大多數瀏覽器不會將屬性更改爲inline-block。下面是一個僞代碼：

CSS：

.btn_play { 
display: inline-block; 
width:21.875%; 
border-radius:50%; 
background: #F7F7F7; 
font-size: 0; 
font-weight: normal; 
text-align:center; 
color: inherit; 
vertical-align: middle; 
position: relative; 
z-index: 22; 
} 

@media (min-width: 320px) and (orientation: landscape) { 
    .btn_play { 
    display: inline-block; 
    } 
    .btn_play_desktop { 
    display: none; 
    } 
} 

@media (min-width: 769px) and (orientation: landscape){ 
    .btn_play { 
    display: none; 
    } 
    .btn_play_desktop { 
    display: inline-block; 
    } 
} 

Answer 1

你是不是在小型設備上隱藏.btn_play_desktop（或沒有表明它不會在你的問題的代碼）。

.btn_play { 
    display: inline-block; 
} 
@media (min-width: 320px) and (orientation: landscape) { 
    .btn_play { 
    display: inline-block; 
    } 
    .btn_play_desktop { 
    display: none; 
    } 
} 

@media (min-width: 769px) and (orientation: landscape){ 
    .btn_play { 
    display: none; 
    } 
    .btn_play_desktop { 
    display: inline-block; 
    } 
} 

...適用以下顯示值（*p代表 「.btn_play」）：

• 取向不景觀：*p：內聯塊，*p_desktop：未設置（默認爲元件）
• 方向在橫向和設備寬度是
  • 0 - 319px：*p：內聯塊; *p_desktop：未設置（默認爲元素）
  • 320px - 768px：*p：inline-block; *p_desktop：none;
  • 769px及以上：*p：none; *p_desktop：inline-block;

---

注意媒體查詢不加特異性。他們只是指定是否適用規則。