使用媒体查询隐藏/显示 <paragraph>答案

【问题标题】：Hide/Show <paragraph> with media query使用媒体查询隐藏/显示 <paragraph>
【发布时间】：2020-01-16 10:56:48
【问题描述】：

我编写了一个网站，但我有一个问题 - 我在同一个 div 中有 2 个不同的段落，但其中一个应该只在屏幕为 600 或以上时显示。可以这样做吗？还是我应该把我的

在第二个里面第一个

 <span class="me-square">
            <div class="me-wrapper">
                <h3>ABOUT ME</h3>
                <p>My name is Katrine, but my friends call me Mira. I’m 20 years old and I live in Denmark. 
                <p id="me-2ndtext">I want this text to only show when the screen is 600 or over</p>
    </div></span>

CSS

#me-2ndtext{
    display: none;
} 

@media screen and (min-width: 601px) {
  div#me-2ndtext {
    display: block;
  }
}

【问题讨论】：

应该是p#me-2ndtext 而不是div。
为什么要使用不同的选择器？我也建议在媒体查询中只使用#me-2ndtext。
而且仅供参考，span 中的 div 是非法嵌套。
要获得好的代码，请尝试使用类似“.is-invisible”的类，因为您可以重复使用此代码而无需再次创建相同的样式。并且避免使用ID作为样式最好使用类。

标签： html css media-queries breakpoints

【解决方案1】：

我会这样

@media screen and (max-width: 601px) {
    #me-2ndtext {
        display: none;
    }
}

【讨论】：

【解决方案2】：

简单版

HTML：

<span class="me-square">
    <div class="me-wrapper">
        <h3>ABOUT ME</h3>
        <p>My name is Katrine, but my friends call me Mira. I’m 20 years old and I live in Denmark. 
        <p id="me-2ndtext">I want this text to only show when the screen is 600 or over</p>
    </div>
</span>

CSS：

@media screen and (max-width: 599px) {
    p#me-2ndtext {
        display: none;
    }
}

或者当它一直是第二段时，你可以这样写：

那么你就不需要额外的 id 了。

HTML：

<span class="me-square">
    <div class="me-wrapper">
        <h3>ABOUT ME</h3>
        <p>My name is Katrine, but my friends call me Mira. I’m 20 years old and I live in Denmark. 
        <p>I want this text to only show when the screen is 600 or over</p>
    </div>
</span>

CSS：

@media screen and (max-width: 599px) {
    p:nth-of-type(2) {
        display: none;
    }
}

【讨论】：