0
這些媒體查詢不起作用。我究竟做錯了什麼?CSS媒體查詢在任何瀏覽器中都不起作用
我這包括在<head>
:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
CSS:
/* LESS THAN 75 (LG) */
@media (max-width: 74.9em) {
.circle {
height: 100px;
width: 100px;
}
}
/* LESS THAN 62 (MD) */
@media (max-width: 61.9em) {
.circle {
height: 100px;
width: 100px;
}
}
/* LESS THAN 48 (SM) */
@media (max-width: 47.9em) {
.circle {
height: 75px;
width: 75px;
}
}
/* LESS THAN 34 (XS) */
@media (max-width: 33.9em) {
.circle {
height: 50px;
width: 50px;
}
}
.circle {
border-radius: 75px;
border: 1px solid $accent;
display: inline-flex;
margin:10px;
}
HTML:
<div class="row" id="middle-row">
<div class="col-md-10 offset-md-1 flex-xs-middle">
<div id="main-text-container">
<h5 class="display-6">vepo</h5>
<h1 class="display-3">
find vegan {{word}} near you.
</h1>
</div>
<div class="col-md-10 col-sm-12 offset-md-1 flex-xs-middle" id="circles-div">
<div class="circle" (mouseover)='over("cupcakes")' (mouseleave)='over("stuff")' id="cupcake">
</div>
<div class="circle" (mouseover)='over("pancakes")' (mouseleave)='over("stuff")' id="pancake">
</div>
<div class="circle" (mouseover)='over("burgers")' (mouseleave)='over("stuff")' id="burger">
</div>
<div class="circle" (mouseover)='over("groceries")' (mouseleave)='over("stuff")' id="groceries">
</div>
</div>
<div class="col-md-10 offset-md-1 flex-xs-middle" id="try-now-div">
<custom-button buttonName="try now" (click)="tryNowClick()"></custom-button>
</div>
</div>
</div>
你使用<!DOCTYPE HTML!>在HTML的頂部? – Hemant
@Hemant是的感謝 – BeniaminoBaggins
Circle div看起來是空的,嘗試使用靜態內容來查看與之關聯之前的媒體查詢的效果任何動態內容 – Hemant