亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

是否可以透過 MediaQueries 更改在較小解析度下顯示的佈局而不更改預(yù)設(shè)佈局?
P粉301523298
P粉301523298 2023-09-16 14:17:29
0
1
1071

我在預(yù)設(shè)解析度上使用「網(wǎng)格模板列」佈局,使元素按預(yù)期顯示,但在較小的解析度上,它們由容器優(yōu)先級(jí)渲染,創(chuàng)建我想要更改的視覺效果。

在預(yù)設(shè)解析度下: 在顯示器左側(cè)呈現(xiàn),然後在顯示器的另一端呈現(xiàn)

# 位於其下方。在較小的解析度上,我想讓元素在此佈局中呈現(xiàn): 然後# 然後

一個(gè)每個(gè)都在另一個(gè)之下。

<div className='container about_container'>

        <div>
          <div>
            <img src={image} alt='Image'/>
          </div>
          <Selector/>
        </div>

        <div>
         <Skills/>
          <div> 
            <p>
            blablabla
            </p>
          </div>
        </div>

      </div>
.container {
    width: 75%;
    margin: 0 auto;
}

.about_container {
    display: grid;
    grid-template-columns: 20% 75%;
    gap: 5%;
}
@media screen and (max-width: 600px) {
    .container {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

P粉301523298
P粉301523298

全部回覆(1)
P粉002546490

考慮應(yīng)用顯示:內(nèi)容 在窄斷點(diǎn)處的列包裝器上,以便它們的佈局框被它們的子級(jí)替換,從而有效地使它們的子級(jí)成為網(wǎng)格佈局的子級(jí)。這樣我們就可以使用 order 對(duì)子元素重新排序,儘管它們位於不同的父元素中。

.container {
  width: 75%;
  margin: 0 auto;
}

.about_container {
  display: grid;
  grid-template-columns: 20% 75%;
  gap: 5%;
}
  
@media screen and (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .contents {
    display: contents;
  }
  
  Selector {
    order: 2;
  }
  
  Skills {
    order: 1;
  }
  
  .paragraph-wrapper {
    order: 3;
  }
}
<div class='container about_container'>

  <div class="contents">
    <div>
      <img src="https://picsum.photos/48/48" alt='Image' />
    </div>
    <Selector>Selector</Selector>
  </div>

  <div class="contents">
    <Skills>Skills</Skills>
    <div class="paragraph-wrapper">
      <p>
        blablabla
      </p>
    </div>
  </div>

</div>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板