我在預(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; } }
考慮應(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>