HTML Responsive Web Design

❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯

Responsive Web Design คือการสร้างหน้าเว็บที่แสดงผลได้เหมาะสมกับทุกอุปกรณ์ ซึ่งจะมีการปรับขนาดหน้าจอแสดงผลของเว็บไซต์ (Viewport) โดยอัตโนมัติ

Responsive Web Design คืออะไร ?

Responsive Web Design คือการใช้ HTML และ CSS เพื่อปรับขนาด, ซ่อน, ย่อ/ขยาย เว็บไซต์อัตโนมัติทำให้เว็บไซต์ดูดีในทุกขนาด (เดสก์ท็อป แท็บเล็ต และโทรศัพท์)

การตั้งค่า Viewport

ในการที่จะทำ Responsive Website คุณควรจะเพิ่มแท็ก <meta> ในหน้าเว็บของคุณ

ตัวอย่าง 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h2>การตั้งค่า Viewport</h2>
<p>ตัวอย่างนี้ไม่ได้ทำอะไรเลยนอกจากแสดงวิธีเพิ่ม Viewport Meta Tag</p>

</body>
</html>
ลองดูสิ ❱

การตั้งค่าวิวพอร์ตของหน้าเว็บจะให้คำแนะนำแก่เบราว์เซอร์เกี่ยวกับวิธีควบคุมขนาดของหน้าเว็บ

นี่คือตัวอย่างของหน้าเว็บที่ไม่มี Viewport Meta Tag กับหน้าเว็บที่มี Viewport Meta Tag

ที่ไม่มี Viewport Meta Tag

มี Viewport Meta Tag

Responsive Images

Responsive Images คือรูปภาพที่ปรับขนาดให้พอดีกับเบราว์เซอร์ทุกขนาด

การใช้ Tag Width

ถ้าใช้ Tag 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>"max-width:100%" ป้องกันไม่ให้รูปภาพมีขนาดใหญ่กว่าขนาดดั้งเดิม อย่างไรก็ตาม หากคุณทำให้หน้าต่างเบราว์เซอร์เล็กลง รูปภาพจะยังคงลดขนาดลง</p>
<p>ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูผลลัพธ์</p>

<img src="images/img_girl.jpg" style="max-width:100%;height:auto;">

</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>
ลองดูสิ ❱
❮ บทเรียนก่อนหน้า
บทเรียนถัดไป ❯