Question

我试图创建一个响应式网站，当我让屏幕变小但是没有显示时让h3显示出来。这是我的代码：

<flux:field.text name="bodytext" label="Content" />

HTML

@media only screen and (max-width: 1486px) 
{ 

.resptekst
{
    visibility: visible;
}

}

.resptekst
{
    visibility: hidden;
}

当我将屏幕缩小时，需要显示文字，当屏幕足够大时，文字应该不可见。

Answer 1

@media only screen and (max-width: 1486px)

表示＆＃34;定位小于1486px＆＃34;

的所有内容

所以将你的css改为：

.resptekst
{
    visibility: visible;
}

@media only screen and (max-width: 1486px) 
{ 
   .resptekst
   {
       visibility: hidden;
   }
}

Answer 2

更改css位置

css从上到下呈现

.resptekst
{
    visibility: hidden;
}

@media only screen and (max-width: 1486px) 
{ 

.resptekst
{
    visibility: visible;
}

}

Answer 3

更改CSS规则的顺序。将一般规则放在@media规则之前，否则无论屏幕大小如何，它都将始终覆盖它。

在CSS中，始终指定从泛型到特定，否则通用规则将覆盖特定规则。

＆＃13;

    /*Generic rule*/
    .resptekst
    {
        visibility: hidden;
    }

    /*small screen specific rule*/
    @media only screen and (max-width: 1486px) 
    { 
    
        .resptekst
        {
            visibility: visible;
        }
    
    }

＆＃13;

    
    <div class="tekst">
                        <h3 class="resptekst">Contact</h3>
    </div>

＆＃13;

如果您有足够大的显示屏（例如全高清），您可以点击Run code snippet按钮，然后点击Full page按钮来测试此代码段。

Answer 4

媒体查询应该是最后的，没有媒体查询的css是第一个

 .resptekst
{
   visibility: hidden;
}



@media only screen and (max-width: 1486px) 
{ 

.resptekst
{
    visibility: visible;
}

}

<div class="tekst">
                    <h3 class="resptekst">Contact</h3>
</div>

使屏幕变小时，文本不会显示

4 个答案: