CSS Media-Abfragen Problem

Question

Ich habe ein Problem, das ich noch nicht bei Media-Abfragen hatte. Ich habe dieses Problem hauptsächlich auf mobilen Geräten in Chrome und Opera, aber nicht in Safari und Firefox.

Ich habe eine Schaltfläche, die display Eigenschaft auf none für Geräte mit Bildschirm mehr als 769px und standardmäßig auf inline-block festgelegt hat. Die meisten Browser ändern jedoch die Eigenschaft für Geräte mit einem Bildschirm unter 769 Pixel nicht in inline-block. Hier ist ein Pseudo-Code:

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

Sie sind nicht .btn_play_desktop auf kleinen Geräten versteckt (oder nicht zeigen, den Code, der es in Ihrer Frage tut).

.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; 
    } 
} 

... gilt folgende Anzeigewerte (*p steht für ".btn_play"):

• Orientierung nicht Landschaft: *p: inline-block, *p_desktop: nicht eingestellt (Standard-Element)
• Orientierung Landschaft und Gerätebreite ist
  • 0 - 319px: *p: Inline-Block; *p_desktop: nicht eingestellt (standardmäßig Element)
  • 320px - 768px: *p: Inline-Block; *p_desktop: keine;
  • 769px und höher: *p: keine; *p_desktop: Inline-Block;

---

Hinweis Medienabfragen nicht hinzufügen Spezifität. Sie geben nur an, ob eine Regel zutrifft oder nicht.