在特定分辨率下删除 CSS 属性

Question

我有几个部分，最受欢迎的部分脱颖而出

[![在此处输入图片描述][1]][1]

<div class="plan popular">
              <div class="price">
                <span class="amount" data-dollar-amount="79">Expert</span><br>
                <span class="dollar">$</span>
                <span class="amount" data-dollar-amount="79">79</span>
                <span class="slash">/</span>
                <span class="month">mo</span>
              </div>
                <p class="pop-plan">Most Popular Plan</p>
             <span>Track <b><font color="#13BD9B">1000</font></b> Keywords</span><br><br>
                <span>Get Mobile Rankings</span><br><br>
               <span>SEO Competitors</span><br><br>

                <span>Daily Updates</span><br><br>

              <span>Task Management
</span><br><br>
              <span>Unlimited Sites
</span><br><br>Unlimited Users
 <a class="button sign-up" href="https://orders.gigenetcloud.com/order.php?quick=79,40,2048,730">Sign Up</a>
            </div>

这是一个部分的代码。绿色的只是名为 "popular" 的 class 的一部分。如果我删除那部分并让 div 成为 class "plan" 那么它是正常的，与其余部分一样为黑色。我想让它响应，所以当分辨率低并且只显示一个 section/line 时，绿色的会丢失 "plan" class 并变为正常以避免在较小的设备上膨胀。

现在调整大小时看起来像这样

[![在此处输入图片描述][2]][2]

谢谢你

Answer 1

您可以使用媒体查询来完成此操作。您可以在这里阅读更多相关信息：http://www.w3schools.com/css/css_rwd_mediaqueries.asp

您需要确定所需的分辨率。然后设置你css你想要的。

Answer 2

在媒体查询中包装 .popular 的样式。像这样：

@media screen and (min-width: 768px){
    .popular {
        border:2px solid green;
        /*rest of the styles*/
    }
}

这样您的 popular class 将仅在屏幕尺寸超过 768px 时应用。

在特定分辨率下删除 CSS 属性

Remove CSS attribute when under certain resolution

html

css

resize

responsive-design