css - CSS - 在 991px 单选按钮下仍然选择隐藏的 div

Question

根据视口，我使用单选按钮有不同版本的表单。我已将代码放在下面，但是，当浏览器调整大小以显示移动设备的较小表单时，单选按钮正在为较大的视口选择隐藏 div 中的单选按钮。请问我该如何解决这个问题？

    <style>
    
    @media screen and (min-width: 992px)
{
    .product-under-991px
    {
        display: none;
        visibility: hidden;
        content-visibility: hidden;
    }
    .product-under-768px
    {
        display: none;
        visibility: hidden;
        content-visibility: hidden;
    }   
}

    @media screen and (max-width: 991px) and (min-width: 768px)
{
    .product-over-992px 
    {
        display: none;
        visibility: hidden;
        content-visibility: hidden;
    }
    .product-under-768px
    {
        display: none;
        visibility: hidden;
        content-visibility: hidden;
    }   
}
    
    @media screen and (max-width: 767px)
{
    .product-over-992px 
    {
        display: none;
        visibility: hidden;
        content-visibility: hidden;
    }
    .product-under-991px
    {
        display: none;
        visibility: hidden;
        content-visibility: hidden;
    }   
}
    
</style>


<div class="product-over-992px">
    <?php include('shop-products-2021/shop-30ltr-sack-over-992px.php'); ?>
    <?php include('shop-products-2021/shop-60ltr-sack-over-992px.php'); ?>
    <?php include('shop-products-2021/shop-bulk-bag-over-992px.php'); ?>
    <?php include('shop-products-2021/shop-2-5-cubemet-over-992px.php'); ?>
</div>  <!--product-over-992px--> 


<div class="product-under-991px">
    <?php include('shop-products-2021/shop-30ltr-sack-under-991px.php'); ?> 
    <?php include('shop-products-2021/shop-60ltr-sack-under-991px.php'); ?>
    <?php include('shop-products-2021/shop-bulk-bag-under-991px.php'); ?>
    <?php include('shop-products-2021/shop-2-5-cubemet-under-991px.php'); ?>
</div>  <!--product-under-991px--> 


<div class="product-under-768px">
    <?php include('shop-products-2021/shop-30ltr-sack-under-768px.php'); ?> 
    <?php include('shop-products-2021/shop-60ltr-sack-under-768px.php'); ?> 
    <?php include('shop-products-2021/shop-bulk-bag-under-768px.php'); ?>
    <?php include('shop-products-2021/shop-2-5-cubemet-under-768px.php'); ?>
</div>  <!--product-under-768px--> 

标签： cssmedia-queries