0
CSSクエリとメディアクエリを使用してグリッドシステムを作成しようとしています。 現在、何らかの理由で手動でウィンドウのサイズを変更すると、自分のページのCSSが変更されますが、Chromeのエミュレータを使用して自分のサイトの応答性をテストできるようにしたいと考えています。現在のところ、Chromeのエミュレータでは、自分のメディアクエリを認識していません。クロムモバイルエミュレータでメディアクエリを認識するために変更する必要があるchrome開発ツールの設定がありますか？これは私が気付いていないSASSのいくつかの変わったものでしょうか？Chromeモバイルエミュレータでメディアクエリが認識されない
ここに私のコードがあれば分かります。
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;
}
}
}
}
「メディアクエリを表示」を試したことがありますか？ –
Josh Leeはクールな機能であり、感謝してくれてうれしいです。 850px、450px、380pxの間で画面の幅を変更しても、CSSは変更されません –