Hide/Show <paragraph> 有媒体查询

Question

我已经编写了一个网站，但我有一个问题 - 我在同一个 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;
  }
}

Answer 1

我会这样走

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

Answer 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;
    }
}

Hide/Show <paragraph> 有媒体查询

Hide/Show <paragraph> with media query

html

css

media-queries

breakpoints