在特定分辨率下移除 CSS 属性 [英] Remove CSS attribute when under certain resolution

问题描述

我有几个部分，最受欢迎的一个突出

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

<div class="价格"><span class="amount" data-dollar-amount="79">专家</span><br><span class="dollar">$</span><span class="amount" data-dollar-amount="79">79</span><span class="slash">/</span><span class="month">mo</span>
<p class="pop-plan">最受欢迎的计划</p><span>轨道<b><font color="#13BD9B">1000</font></b>关键词</span><br><br><span>获取移动排名</span><br><br><span>SEO 竞争对手</span><br><br><span>每日更新</span><br><br><span>任务管理</span><br><br><span>无限站点</span><br><br>无限用户<a class="button sign-up" href="https://orders.gigenetcloud.com/order.php?quick=79,40,2048,730">注册</a>

这是一个部分的代码.绿色的只是名为popular"的类的一部分.如果我删除那部分并让 div 属于计划"类，那么它是正常的，黑色和其他部分一样.我想让它具有响应性，因此当分辨率较低且仅显示一个部分/行时，绿色的将失去计划"类并变为正常以避免在较小的设备上膨胀.

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

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

谢谢

解决方案

在媒体查询中为 .popular 包装您的样式.像这样:

@media screen and (min-width: 768px){.受欢迎的 {边框:2px 纯绿色；/*其余样式*/}}

这样您的 popular 类只会在屏幕尺寸超过 768 像素时应用.

I have a few sections and the most popular one stands out

[![enter image description here][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>

Here is the code for a section. The green one is simply part of the class named "popular". If I delete that part and let the div be of class "plan" then it is normal, with black like the rest. I want to make it responsive, so when the resolution is low and only one section/line is shown, the green one loses the "plan" class and turns to normal to avoid bloating on smaller devices.

Right now it would look like this when resizing

[![enter image description here][2]][2]

thank you

解决方案

Wrap your style for .popular in a media query. like this:

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

This way your popular class will only be applied if the screen size is more than 768px.

这篇关于在特定分辨率下移除 CSS 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！