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;

---

注意媒体查询不加特异性。他们只是指定是否适用规则。