Chrome Mobile Emulator erkennt keine Medienabfragen

Ich versuche, ein Raster-System mit CSS-und Medien-Abfragen zu machen. Momentan ändert sich das CSS meiner Seite nicht, wenn ich die Größe meines Fensters manuell ändere, aber ich würde gerne die Reaktionsfähigkeit meiner Website mit dem Chrome Emulator testen können. Der Chrome-Emulator erkennt derzeit keine meiner Medienabfragen. Gibt es eine Einstellung in den Chrome-Dev-Tools, die ich in den Chrome Mobile Emulator ändern muss, um Medienabfragen zu erkennen? Könnte das eine Eigenart von SASS sein, von der ich nichts weiß?Chrome Mobile Emulator erkennt keine Medienabfragen

Hier ist mein Code, wenn es helfen wird.

HTML:

<html> 

    <head> 
     <title>Sass Grid</title> 
     <link rel="stylesheet" href="Grid.css"/> 
    </head> 

    <body> 
     <div id="grid" class="cell-850-3 cell-450-2 cell-380-1 cell-16"> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     </div> 
    </body> 
</html>

CSS:

#grid > div { 
    height: 25px; 
    background: #ccc; 
    border: 1px solid #aaa; 
    box-sizing: border-box; 
    float: left; } 

#grid.cell-1 > div { 
    width: 100%; } 

#grid.cell-2 > div { 
    width: 50%; } 

#grid.cell-3 > div { 
    width: 33.33333%; } 

#grid.cell-4 > div { 
    width: 25%; } 

#grid.cell-5 > div { 
    width: 20%; } 

#grid.cell-6 > div { 
    width: 16.66667%; } 

#grid.cell-7 > div { 
    width: 14.28571%; } 

#grid.cell-8 > div { 
    width: 12.5%; } 

#grid.cell-9 > div { 
    width: 11.11111%; } 

#grid.cell-10 > div { 
    width: 10%; } 

#grid.cell-11 > div { 
    width: 9.09091%; } 

#grid.cell-12 > div { 
    width: 8.33333%; } 

#grid.cell-13 > div { 
    width: 7.69231%; } 

#grid.cell-14 > div { 
    width: 7.14286%; } 

#grid.cell-15 > div { 
    width: 6.66667%; } 

#grid.cell-16 > div { 
    width: 6.25%; } 

@media (max-width: 850px) { 
    #grid.cell-850-1 > div { 
    width: 100%; } 

    #grid.cell-850-2 > div { 
    width: 50%; } 

    #grid.cell-850-3 > div { 
    width: 33.33333%; } 

    #grid.cell-850-4 > div { 
    width: 25%; } 

    #grid.cell-850-5 > div { 
    width: 20%; } 

    #grid.cell-850-6 > div { 
    width: 16.66667%; } 

    #grid.cell-850-7 > div { 
    width: 14.28571%; } 

    #grid.cell-850-8 > div { 
    width: 12.5%; } 

    #grid.cell-850-9 > div { 
    width: 11.11111%; } 

    #grid.cell-850-10 > div { 
    width: 10%; } 

    #grid.cell-850-11 > div { 
    width: 9.09091%; } 

    #grid.cell-850-12 > div { 
    width: 8.33333%; } } 
@media (max-width: 450px) { 
    #grid.cell-450-1 > div { 
    width: 100%; } 

    #grid.cell-450-2 > div { 
    width: 50%; } 

    #grid.cell-450-3 > div { 
    width: 33.33333%; } 

    #grid.cell-450-4 > div { 
    width: 25%; } 

    #grid.cell-450-5 > div { 
    width: 20%; } 

    #grid.cell-450-6 > div { 
    width: 16.66667%; } } 
@media (max-width: 380px) { 
    #grid.cell-380-1 > div { 
    width: 100%; } 

    #grid.cell-380-2 > div { 
    width: 50%; } 

    #grid.cell-380-3 > div { 
    width: 33.33333%; } }

SCSS:

#grid > div { 
    height: 25px; 
    background: #ccc; 
    border: 1px solid #aaa; 
    box-sizing: border-box; 
    float: left; 
} 

@for $i from 1 through 16 { 

    $equ: 100%/$i ; 

    #grid.cell-#{ $i } > div { 
     width: $equ; 
    } 
} 

$map: (850: 12, 450: 6, 380: 3); 

@each $key, $val in $map { 
    @media (max-width: $key + px){ 

    @for $i from 1 through $val { 
     $equ: 100%/$i ; 
     #grid.cell-#{ $key }-#{$i} > div { 
      width: $equ; 
     } 
    } 
    } 
}

Quelle

2017-03-22 Yonatan Meschede-Krasa

Haben Sie versucht "Medienabfragen anzeigen"? –

Josh Lee, das ist ein cooles Feature und es ist gut, es zu wissen, danke. Das CSS ändert sich immer noch nicht, wenn ich die Bildschirmbreite zwischen 850px, 450px und 380px ändere –

Wenn die Medien Abfragen funktionieren, wenn Sie nicht im Geräte-Modus sind (zB wenn sie arbeiten Sie verringern die Breite des Browserfensters), dann ist es nur ein Fehler im Gerätemodus. Ich habe vor kurzem etwas Ähnliches gemeldet: https://crbug.com/699246

Device Mode soll emulieren, wie Ihre Seite auf verschiedenen Geräten mit unterschiedlichen Ansichtsfenstergrößen aussieht. Es gibt keine Einstellung, die Sie aktivieren müssen.

Quelle

2017-03-22 19:17:40

Fügen Sie innerhalb des Tags head<meta> hinzu.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />

Quelle

2017-03-28 11:02:15

Chrome Mobile Emulator erkennt keine Medienabfragen

Antwort

Verwandte Themen