รูปแบบมาโครจะอธิบายการจัดระเบียบอินเทอร์เฟซที่มีขนาดใหญ่ขึ้นและครอบคลุมทั้งหน้า
ก่อนใช้เลย์เอาต์ใดๆ คุณก็ควรดูให้แน่ใจว่าความต่อเนื่องของคอนเทนต์นั้นเหมาะสม การเรียงลำดับเริ่มต้นจากคอลัมน์เดียวนี้คือสิ่งที่หน้าจอขนาดเล็กจะได้รับ
<body>
<header>…</header>
<main>
<article>…</article>
<aside>…</aside>
</main>
<footer>…</footer>
</body>
เมื่อคุณจัดเรียงคอมโพเนนต์ระดับหน้าเว็บ คุณกำลังออกแบบเลย์เอาต์มาโคร นั่นคือ มุมมองระดับสูงของหน้าเว็บ เมื่อใช้คิวรี่สื่อ คุณจะสามารถระบุกฎใน CSS ที่อธิบายว่ามุมมองนี้ควรปรับให้เข้ากับหน้าจอขนาดต่างๆ อย่างไร
GRid
ตารางกริด CSS เป็นเครื่องมือที่ยอดเยี่ยมในการนำเลย์เอาต์ไปใช้กับหน้าเว็บ ในตัวอย่างข้างต้น สมมติว่าคุณต้องการการจัดวางแบบ 2 คอลัมน์เมื่อมีความกว้างของหน้าจอเพียงพอ หากต้องการใช้การจัดวางแบบ 2 คอลัมน์นี้เมื่อเบราว์เซอร์กว้างพอ ใช้คิวรี่สื่อเพื่อกำหนดรูปแบบตารางกริดเหนือเบรกพอยท์ที่ระบุ
@media (min-width: 45em) {
main {
display: grid;
grid-template-columns: 2fr 1fr;
}
}
เฟล็กซ์บ็อกซ์
สำหรับเลย์เอาต์นี้ คุณยังใช้ flexbox ได้อีกด้วย สไตล์จะมีลักษณะดังนี้
@media (min-width: 45em) {
main {
display: flex;
flex-direction: row;
}
main article {
flex: 2;
}
main aside {
flex: 1;
}
}
แต่เวอร์ชัน Flexbox ต้องใช้ CSS มากกว่า แต่ละคอลัมน์จะมีกฎที่แยกจากกันเพื่ออธิบายปริมาณที่ควรใช้ ในตัวอย่างแบบตารางกริด ข้อมูลเดียวกันจะรวมอยู่ในกฎ 1 ข้อสำหรับองค์ประกอบที่มี
คุณต้องการคิวรี่สื่อไหม
คุณอาจไม่จำเป็นต้องใช้การค้นหาสื่อเสมอไป คำค้นหาสื่อทำงานได้ดี เมื่อคุณนำการเปลี่ยนแปลงไปใช้กับองค์ประกอบบางอย่าง แต่หากจำเป็นต้องอัปเดตเค้าโครงบ่อยๆ คิวรี่สื่อของคุณอาจไม่เหมาะกับเบรกพอยท์จำนวนมาก
สมมติว่าคุณมีหน้าที่เต็มไปด้วยส่วนประกอบของการ์ด
การ์ดจะไม่กว้างกว่า 15em และคุณต้องการใส่การ์ดใน 1 บรรทัดให้พอดี
คุณสามารถเขียนคิวรี่สื่อด้วยเบรกพอยท์ 30em, 45em, 60em,
ทำแบบนี้ไปเรื่อยๆ แต่มันค่อนข้างน่าเบื่อและดูแลยาก
แต่คุณสามารถใช้กฎเพื่อให้การ์ดใช้พื้นที่ที่เหมาะสมโดยอัตโนมัติแทน
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
grid-gap: 1em;
}
คุณสร้างเลย์เอาต์ที่คล้ายกันได้โดยใช้ Flexbox ในกรณีนี้ หากมีการ์ด ไม่เพียงพอที่จะกรอกข้อมูลในแถวสุดท้าย การ์ดที่เหลือจะขยายออกให้เต็มพื้นที่ว่าง แทนที่จะเรียงแถวกันในคอลัมน์ หากต้องการเรียงแถวและคอลัมน์ ให้ใช้ตารางกริด
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1em;
}
.cards .card {
flex-basis: 15em;
flex-grow: 1;
}
การใช้กฎอัจฉริยะใน Flexbox หรือตารางกริด คุณสามารถออกแบบเลย์เอาต์มาโครแบบไดนามิกด้วย CSS ที่น้อยที่สุดและไม่ต้องมีคิวรี่สื่อใดๆ ได้ วิธีนี้จะใช้งานได้น้อยลงเนื่องจากคุณเลือกให้เบราว์เซอร์ทำการคำนวณแทน หากต้องการดูตัวอย่างบางส่วนของเลย์เอาต์ CSS ที่ทันสมัยซึ่งใช้งานได้แบบลื่นไหลโดยไม่ต้องใช้คำค้นหาสื่อ โปรดดู 1linelayouts.com
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับเลย์เอาต์มาโคร
ประโยคใดอธิบายเลย์เอาต์มาโครได้ดีที่สุด
เลย์เอาต์มาโครจะใช้คำค้นหาสื่อเพื่อปรับให้เข้ากับหน้าจอขนาดต่างๆ เสมอใช่ไหม
ตอนนี้คุณก็ได้แนวคิดบางส่วนสำหรับ เลย์เอาต์มาโครระดับหน้าเว็บแล้ว ให้ความสนใจกับส่วนประกอบในหน้า นี่คืออาณาจักรของ รูปแบบไมโคร