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


ตัวอย่างนี้ไม่ได้ทำอะไรเลยนอกจากแสดงวิธีเพิ่ม viewport meta tag

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

นี่คือตัวอย่างของหน้าเว็บที่ไม่มี viewport meta tag กับหน้าเว็บที่มี viewport meta tag

ที่ไม่มี viewport meta tag

มี viewport meta tag

Responsive Images

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

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

<img src="img_girl.jpg" style="width:100%;">

</body>
</html>

Responsive Image

เมื่อใช้คุณสมบัติของแท็ก width กำหนดเป็นค่าเปอร์เซ็นต์ รูปภาพจะขยายขนาดขึ้นและลงเมื่อปรับขนาดหน้าต่างเบราว์เซอร์ ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูผลลัพธ์

โปรดสังเกตว่าในตัวอย่างด้านบน สามารถปรับขนาดรูปภาพให้ใหญ่กว่าขนาดดั้งเดิมได้ เป็นดีกว่าคือการใช้ 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="img_girl.jpg" style="max-width:100%;height:auto;">

</body>
</html>

Responsive Image


“max-width:100%”ป้องกันไม่ให้รูปภาพมีขนาดใหญ่กว่าขนาดดั้งเดิม อย่างไรก็ตาม หากคุณทำให้หน้าต่างเบราว์เซอร์เล็กลง รูปภาพจะยังคงลดขนาดลง


ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูผลลัพธ์

แสดงภาพที่แตกต่างกันให้ขึ้นอยู่กับความกว้างของเบราว์เซอร์

องค์ประกอบ 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="img_smallflower.jpg" media="(max-width: 600px)">
  <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
  <source srcset="flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

</body>
</html>

แสดงภาพที่แตกต่างกันขึ้นอยู่กับขนาดความกว้างของเบราว์เซอร์


ลองปรับขนาดความกว้างของเบราว์เซอร์และรูปภาพจะเปลี่ยนที่ขนาด 600px และ 1500px


Flowers

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>วิวพอร์ตคือขนาดหน้าต่างเบราว์เซอร์ 1vw = 1% ของความกว้างวิวพอร์ต ถ้าviewportกว้าง 50 ซม. 1vw คือ 0.5 ซม.</p>

</body>
</html>

Responsive Text

ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูว่าปรับขนาดข้อความอย่างไร

ใช้หน่วย “vw” เมื่อปรับขนาดข้อความ 10vw จะกำหนดขนาดเป็น 10% ของความกว้างviewport

วิวพอร์ตคือขนาดหน้าต่างเบราว์เซอร์ 1vw = 1% ของความกว้างวิวพอร์ต ถ้าviewportกว้าง 50 ซม. 1vw คือ 0.5 ซม.

การใช้ 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 ใช้งานง่ายและใช้ฟรี

W3.CSS

W3.CSS เป็นเฟรมเวิร์ก CSS แบบใหม่ที่รองรับการออกแบบเดสก์ท็อป แท็บเล็ต และมือถือตามค่าเริ่มต้น

W3.CSS มีขนาดเล็กกว่าและเร็วกว่าเฟรมเวิร์ก CSS ที่คล้ายกัน อีกทั้งถูกแบบให้เป็นอิสระจาก jQuery หรือ JavaScript library อื่นๆด้วย

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

<div class="w3-container w3-green">
  <h1>ตัวอย่างการใช้งาน W3.CSS </h1> 
  <p>ลองปรับขนาดเบราว์เซอร์ดูสิ</p> 
</div>
<br>
<div class="w3-row-padding">
  <div class="w3-third">
    <h2>ลอนดอน</h2>
    <p>ลอนดอนเป็นเมืองหลวงของอังกฤษ</p>
    <p>เป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีพื้นที่เมืองที่มีประชากรมากกว่า 13 ล้านคน</p>
  </div>

  <div class="w3-third">
    <h2>ปารีส</h2>
    <p>ปารีส เป็นเมืองหลวงของฝรั่งเศส</p> 
    <p>พื้นที่ปารีสเป็นหนึ่งในศูนย์ประชากรที่ใหญ่ที่สุดในยุโรป โดยมีประชากรมากกว่า 12 ล้านคน</p>
  </div>

  <div class="w3-third">
    <h2>โตเกียว</h2>
    <p>โตเกียวเป็นเมืองหลวงของประเทศญี่ปุ่น</p>
    <p>เป็นศูนย์กลางของเขตมหานครโตเกียวและเขตเมืองที่มีประชากรมากที่สุดในโลก</p>
  </div>
</div>

</body>
</html>

W3.CSS

ตัวอย่างการใช้งาน W3.CSS

ลองปรับขนาดเบราว์เซอร์ดูสิ


ลอนดอน

ลอนดอนเป็นเมืองหลวงของอังกฤษ

เป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีพื้นที่เมืองที่มีประชากรมากกว่า 13 ล้านคน

ปารีส

ปารีส เป็นเมืองหลวงของฝรั่งเศส

พื้นที่ปารีสเป็นหนึ่งในศูนย์ประชากรที่ใหญ่ที่สุดในยุโรป โดยมีประชากรมากกว่า 12 ล้านคน

โตเกียว

โตเกียวเป็นเมืองหลวงของประเทศญี่ปุ่น

เป็นศูนย์กลางของเขตมหานครโตเกียวและเขตเมืองที่มีประชากรมากที่สุดในโลก

Bootstrap

เฟรมเวิร์ก 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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  </head>
<body>

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Page</h1>
    <p>ปรับขนาดเบราว์เซอรืเพื่อดูผลลัพธ์</p> 
  </div>
  <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>

Bootstrap Example

Bootstrap Page

ปรับขนาดเบราว์เซอรืเพื่อดูผลลัพธ์

คอลัมน์ 1

เนื้อหาบลาๆๆๆ……..

เนื้อหาบลาๆๆๆ……..

คอลัมน์ 2

เนื้อหาบลาๆๆๆ……..

เนื้อหาบลาๆๆๆ……..

คอลัมน์ 3

เนื้อหาบลาๆๆๆ……..

เนื้อหาบลาๆๆๆ……..

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