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。

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

2 个答案: