僅屏幕和（最小寬度：0px）和（最大寬度：327px）不起作用

Question

響應在html和div標簽中不起作用。

我的郵政編碼是

<link media="only screen and (min-width: 0px) and (max-width: 327px)" rel="stylesheet" type="text/css" href="mobile.css">

我的身體密碼是

<div id="div1">

    <div class="he" style="background-color: #65a82a; height: 40px: 10px " >
        <span class="ac" style="margin: 10px 7px 5px 3px;color: white;font-size: 3vmax;">   لینک مستقیم اشتراک گذاری در وبسایت و شبکه های اجتماعی :</span>
    </div>
    <div class="ad" style="text-align: left;margin: 18px">
        <a href="<?php echo $imgsrc[0]; ?>"> <span style="color: black;font-size: 17px"> https://pic.leanilo.com/wp-content/uploads/2019/03/1553530968n8g4k.jpg </span></a></div></div>

和tablet.css代碼是

.he{background-color: red; height: 55px;margin: 10px}

Answer 1

CSS規則的特殊性在這里發揮作用。 您可以在檢查器中看到您想要的規則被划掉，而另一個規則被應用。 這是因為內聯樣式勝過通常聲明的類選擇器。 要修復，將內聯樣式從圖像的style屬性中移出，然后將這些樣式移到樣式表中。 然后，您的媒體查詢應以正確的寬度覆蓋。

例如，在此代碼段中，您可以看到類class .he的div在CSS規則中具有red的背景色，但是在運行該代碼段時，背景為綠色，因為在該元素上具有綠色背景的style屬性color（ style="background-color: #65a82a; height: 2.8vmax;margin: 10px " ）。

 .he { background-color: red; height: 55px; margin: 10px; } 

 <div class="he" style="background-color: #65a82a; height: 2.8vmax;margin: 10px " > <span class="ac" style="margin: 10px 7px 5px 3px;color: white;font-size: 3vmax;"> لینک مستقیم اشتراک گذاری در وبسایت و شبکه های اجتماعی :</span> </div> 

這稱為內聯樣式，當內聯樣式的目標是也在CSS中聲明的規則時，內聯樣式會獲勝。 媒體查詢將以相同的方式工作。

要解決此問題，請將樣式從HTML移到CSS，然后將得到更理想的結果：

 .he { background-color: #65a82a; height: 40px: } .ac { margin: 10px 7px 5px 3px; color: white; font-size: 3vmax; } @media only screen and (max-width: 327px) { .he { background-color: red; /* these styles now applied */ height: 55px; margin: 10px; } } 

 <div class="he"> <span class="ac"> لینک مستقیم اشتراک گذاری در وبسایت و شبکه های اجتماعی :</span> </div> 

運行該代碼段並更改屏幕尺寸，以查看媒體查詢的運行情況。