Responsive Column Width: Media Query ปรับ Width ตาม Breakpoint
ใช้ @media query ตรวจสอบ viewport width เปลี่ยน width ของคอลัมน์ เช่น 50% → 100% เมื่อจอแคบกว่า 700px
โค้ดตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
.sample { width: 50%; background-color: lightblue; height: 200px; font-size: 18px; }
@media only screen and (max-width: 700px) {
body { margin: 0; padding: 0; }
.sample { width: 100%; }
}
</style>
</head>
<body>
<h1>เปลี่ยนความกว้างคอลัมน์ตามขนาดหน้าจอ</h1>
<div class="sample">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod, maiores!</div>
<h3>Resize browser ไป 700px และน้อยกว่า เพื่อดู div กว้าง 100%</h3>
</body>
</html>แนวทางทันสมัย: Fluid Width + Flexbox/Grid
/* Flexbox */
.col { flex: 1 1 300px; } /* ขยายได้ หดได้ ขั้นต่ำ 300px */
/* Grid */
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}ไม่ต้องเขียน media query คงที่ – layout ปรับตัวอัตโนมัติตามพื้นที่
Container Queries (อนาคต/ปัจจุบัน)
.card-container { container-type: inline-size; }
@container (min-width: 400px) {
.card { /* style เมื่อ container กว้างพอ */ }
}Responsive ตามขนาด *Container* ไม่ใช่ Viewport – ยืดหยุ่นกว่าสำหรับ Component-based design
