Responsive Web Design คือการสร้างหน้าเว็บที่แสดงผลได้เหมาะสมกับทุกอุปกรณ์ ซึ่งจะมีการปรับขนาดหน้าจอแสดงผลของเว็บไซต์ (Viewport) โดยอัตโนมัติ
Responsive Web Design คืออะไร ?
Responsive Web Design คือการใช้ HTML และ CSS เพื่อปรับขนาด, ซ่อน, ย่อ/ขยาย เว็บไซต์อัตโนมัติทำให้เว็บไซต์ดูดีในทุกขนาด (เดสก์ท็อป แท็บเล็ต และโทรศัพท์)
การตั้งค่า Viewport
ในการที่จะทำ Responsive Website คุณควรจะเพิ่มแท็ก
<meta> ในหน้าเว็บของคุณ
ตัวอย่าง
<meta name="viewport" content="width=device-width, initial-scale=1.0">
การตั้งค่าวิวพอร์ตของหน้าเว็บจะให้คำแนะนำแก่เบราว์เซอร์เกี่ยวกับวิธีควบคุมขนาดของหน้าเว็บ
นี่คือตัวอย่างของหน้าเว็บที่ไม่มี Viewport Meta Tag กับหน้าเว็บที่มี Viewport Meta Tag
Responsive Images
Responsive Images คือรูปภาพที่ปรับขนาดให้พอดีกับเบราว์เซอร์ทุกขนาด
การใช้ Tag Width
ถ้าใช้
<width> เป็น 100% รูปภาพจะตอบสนองและเพิ่มขนาดขึ้นและลง
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>เมื่อใช้คุณสมบัติของ Tag width กำหนดเป็นค่าเปอร์เซ็นต์ รูปภาพจะขยายขนาดขึ้นและลงเมื่อปรับขนาดหน้าต่างเบราว์เซอร์ ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูผลลัพธ์</p>
<img src="images/img_girl.jpg" style="width:100%;">
</body>
</html>
โปรดสังเกตว่าในตัวอย่างด้านบน สามารถปรับขนาดรูปภาพให้ใหญ่กว่าขนาดดั้งเดิมได้
เป็นดีกว่าคือการใช้
เป็นดีกว่าคือการใช้
<max-width> การใช้คุณสมบัติ max-width
หากใช้
<max-width> ตั้งค่าคุณสมบัติเป็น 100% รูปภาพจะย่อขนาดลงหากจำเป็น แต่จะไม่ขยายขนาดให้ใหญ่กว่ารูปขนาดดั้งเดิม
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>เมื่อใช้คุณสมบัติของ Tag width กำหนดเป็นค่าเปอร์เซ็นต์ รูปภาพจะขยายขนาดขึ้นและลงเมื่อปรับขนาดหน้าต่างเบราว์เซอร์ ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูผลลัพธ์</p>
<img src="images/img_girl.jpg" style="width:100%;">
</body>
</html>
แสดงภาพที่แตกต่างกันให้ขึ้นอยู่กับความกว้างของเบราว์เซอร์
Element HTML <picture> ช่วยให้คุณสามารถกำหนดรูปภาพต่างๆ สำหรับขนาดหน้าต่างเบราว์เซอร์ต่างๆ
ลองปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูว่าภาพด้านล่างเปลี่ยนแปลงไปตามความกว้าง
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>แสดงภาพที่แตกต่างกันขึ้นอยู่กับขนาดความกว้างของเบราว์เซอร์</h2>
<p>ลองปรับขนาดความกว้างของเบราว์เซอร์และรูปภาพจะเปลี่ยนที่ขนาด 600px และ 1500px</p>
<picture>
<source srcset="images/img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="images/img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="images/flowers.jpg">
<img src="images/img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>
Responsive Text Size
ขนาดข้อความสามารถกำหนดได้ด้วยหน่วย “
vw” ซึ่งหมายถึง “ความกว้างของวิวพอร์ต”
ด้วยวิธีนี้ขนาดข้อความจะเป็นไปตามขนาดของหน้าต่างเบราว์เซอร์
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูว่าปรับขนาดข้อความอย่างไร</p>
<p style="font-size:5vw;">ใช้หน่วย "vw" เมื่อปรับขนาดข้อความ 10vw จะกำหนดขนาดเป็น 10% ของความกว้าง viewport</p>
<p>viewport คือขนาดหน้าต่างเบราว์เซอร์ 1vw = 1% ของความกว้างวิวพอร์ต ถ้า viewport กว้าง 50 ซม. 1vw คือ 0.5 ซม.</p>
</body>
</html>
การใช้ Media Queries
Media Queries เป็นหนึ่งในวิธีการทำเว็บไซต์ Responsive คุณสามารถกำหนดรูปแบบการแสดงผลที่แตกต่างกันเพื่อให้เหมาะกับขนาดเบราว์เซอร์ที่แตกต่างกัน
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.left {
background-color: #2196F3;
padding: 20px;
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
background-color: #f1f1f1;
padding: 20px;
float: left;
width: 60%; /* The width is 60%, by default */
}
.right {
background-color: #04AA6D;
padding: 20px;
float: left;
width: 20%; /* The width is 20%, by default */
}
/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
</head>
<body>
<h2>Media Queries</h2>
<p>ลองปรับขนาดเบราว์เซอร์เพื่อดูความแตกต่างของหน้าเมนู</p>
<p>เช็คให้ชัวร์ว่าคุณปรับขนาดต่ำกว่า 800px จะเห็นการเปลี่ยนแปลง</p>
<div class="left">
<p>เมนูด้านซ้าย</p>
</div>
<div class="main">
<p>เนื้อหาหลัก</p>
</div>
<div class="right">
<p>เนื้อหาด้านขวา</p>
</div>
</body>
</html>
Responsive Web Design – Frameworks
CSS Frameworks ยอดฮิตส่วนใหญ่รองรับ Responsive Design ใช้งานง่ายและใช้ฟรี
Bootstrap
Framework CSS ยอดนิยมอีกตัวหนึ่งคือ Bootstrap ใช้ HTML, CSS และ jQuery เพื่อสร้าง Responsive Web Pages
ตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Bootstrap Page</h1>
<p>ปรับขนาดเบราว์เซอร์เพื่อดูผลลัพธ์</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>คอลัมน์ 1</h3>
<p>โปรเจ็กเตอร์เวเฟอร์ คอนแทคโปลิศ ซิม นอร์ทราเมนสเก็ตช์คูลเลอร์...</p>
<p>ภูมิทัศน์วาริชศาสตร์เป็นไงไฟต์ สหัสวรรษเบญจมบพิตร สลัมโค้ชสะบึมส์เฟรม ไลฟ์ แพนงเชิญจิ๊ก...</p>
</div>
<div class="col-sm-4">
<h3>คอลัมน์ 2</h3>
<p>โปรเจ็กเตอร์เวเฟอร์ คอนแทคโปลิศ ซิม นอร์ทราเมนสเก็ตช์คูลเลอร์...</p>
<p>ภูมิทัศน์วาริชศาสตร์เป็นไงไฟต์ สหัสวรรษเบญจมบพิตร สลัมโค้ชสะบึมส์เฟรม ไลฟ์ แพนงเชิญจิ๊ก...</p>
</div>
<div class="col-sm-4">
<h3>คอลัมน์ 3</h3>
<p>โปรเจ็กเตอร์เวเฟอร์ คอนแทคโปลิศ ซิม นอร์ทราเมนสเก็ตช์คูลเลอร์...</p>
<p>ภูมิทัศน์วาริชศาสตร์เป็นไงไฟต์ สหัสวรรษเบญจมบพิตร สลัมโค้ชสะบึมส์เฟรม ไลฟ์ แพนงเชิญจิ๊ก...</p>
</div>
</div>
</div>
</body>
</html>