รูปแบบมาโครจะอธิบายการจัดระเบียบอินเทอร์เฟซที่มีขนาดใหญ่และครอบคลุมทั้งหน้า
ก่อนนำเลย์เอาต์ที่ใช้ คุณควรตรวจสอบว่าโฟลว์ของเนื้อหาที่เหมาะสม การจัดเรียงคอลัมน์เริ่มต้นเพียงคอลัมน์เดียวนี้คือสิ่งที่หน้าจอขนาดเล็กจะได้รับ
<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 เพิ่มเติม แต่ละคอลัมน์มีกฎแยกกันเพื่ออธิบายขนาดพื้นที่ที่ต้องใช้ ในตัวอย่างตารางกริด ข้อมูลเดียวกันนั้นจะรวมอยู่ในกฎเดียวสำหรับองค์ประกอบที่มีอยู่
คุณต้องการคิวรี่สื่อหรือไม่
คุณอาจไม่จำเป็นต้องใช้การค้นหาสื่อเสมอไป คำค้นหาสื่อจะทำงานได้ดีเมื่อนำการเปลี่ยนแปลงไปใช้กับองค์ประกอบไม่กี่อย่าง แต่หากจำเป็นต้องอัปเดตเลย์เอาต์บ่อยๆ คำค้นหาสื่อของคุณอาจใช้งานไม่ได้เมื่อเกิดเบรกพอยท์จำนวนมาก
สมมติว่าคุณมีหน้าเว็บที่เต็มไปด้วยองค์ประกอบของการ์ด
การ์ดต้องมีความกว้างไม่เกิน 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
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับรูปแบบมาโคร
ประโยคใดอธิบายเลย์เอาต์ของมาโครได้ดีที่สุด
เลย์เอาต์แบบมาโครใช้คำค้นหาสื่อเพื่อปรับให้เข้ากับหน้าจอขนาดต่างๆ เสมอใช่ไหม
ตอนนี้คุณมีแนวคิดสำหรับเลย์เอาต์มาโครระดับหน้าเว็บ แล้ว ลองหันไปสนใจคอมโพเนนต์ภายในหน้าเว็บดูบ้าง นี่คือขอบเขตของเลย์เอาต์ขนาดเล็ก