在一定分辨率下删除 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>

下面是一个部分的代码。绿色的只是名为"流行"的类的一部分。如果我删除该部分并让div 成为类"计划"，那么它是正常的，其余部分一样是黑色的。我想让它响应迅速，所以当分辨率较低并且只显示一个部分/行时，绿色的会失去"计划"类并变为正常以避免在较小的设备上腹胀。

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

[！在此处输入图像描述][2]][2]

谢谢

Answer 1

在

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

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

这样，仅当屏幕尺寸超过 768 像素时，才会应用 popular 类。

Answer 2

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

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