การออกแบบเว็บไซต์แบบเคลื่อนไหว HTML

อะไรคือ Responsive Web Design?

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

สร้างการออกแบบที่สามารถปรับเปลี่ยนได้ของคุณเอง

หนึ่งในวิธีที่สามารถสร้างการออกแบบที่สามารถปรับเปลี่ยนได้คือการทำเอง:

!DOCTYPE html
<html lang="en-US">
<head>
<style>
.city {
float: left;
margin: 5px;
padding: 15px;
width: 300px;
height: 300px;
border: 1px solid black;
} 
</style>
</head>
<body>
<h1>CodeW3C.com ตัวอย่าง</h1>
<h2>เลื่อนหน้านี้เพื่อดูว่ามันสามารถปรับขนาดได้!</h2>
<br>
<div class="city">
<h2>ลอนดอน</h2>
<p>กรุงลอนดอนเป็นเมืองหลวงของอังกฤษ。</p>
<p>เป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร,</p>
<p>โดยมีบริเวณมหาเมืองที่มีประชากรมากกว่า 13 ล้านคน。</p>
</div>
<div class="city">
<h2>ปารีส</h2>
<p>กรุงปารีสเป็นเมืองหลวงและเมืองที่มีประชากรมากที่สุดของประเทศฝรั่งเศส。</p>
</div>
<div class="city">
<h2>โตเกียว</h2>
<p>กรุงโตเกียวเป็นเมืองหลวงของประเทศญี่ปุ่น ศูนย์กลางของบริเวณกรุงโตเกียวทั้งหมด,</p>
และเมืองมหาชนที่มีประชากรมากที่สุดในโลก。</p>
</div>
</body>
</html>

ทดลองด้วยตัวเอง

ใช้ Bootstrap

อีกวิธีหนึ่งที่สามารถสร้างการออกแบบที่สามารถปรับเปลี่ยนได้คือการใช้โครง CSS ที่มีอยู่แล้ว

Bootstrap คือ HTML, CSS และ JS ฟรีแมมที่เป็นที่นิยมที่สุดสำหรับพัฒนาเว็บไซต์ที่สามารถปรับเปลี่ยนได้ตามมองของผู้ใช้

Bootstrap ช่วยคุณพัฒนาเว็บไซต์ที่มีที่ดูดึงตาทุกขนาด: จอแสงส่อง, คอมพิวเตอร์โน้ตบุค, ตัวเล็กหรือโทรศัพท์มือถือ:

!DOCTYPE html
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" 
  href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="jumbotron">
  <h1>CodeW3C.com ตัวอย่าง</h1> 
  <p>ปรับขนาดหน้าเว็บที่ตอบสนองการแสดงผล!</p> 
</div>
</div>
<div class="container">
<div class="row">
  <div class="col-md-4">
    <h2>ลอนดอน</h2>
    <p>กรุงลอนดอนเป็นเมืองหลวงของอังกฤษ。</p>
    <p>เป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร,</p>
    <p>โดยมีบริเวณมหาเมืองที่มีประชากรมากกว่า 13 ล้านคน。</p>
  </div>
  <div class="col-md-4">
    <h2>ปารีส</h2>
    <p>กรุงปารีสเป็นเมืองหลวงและเมืองที่มีประชากรมากที่สุดของประเทศฝรั่งเศส。</p>
  </div>
  <div class="col-md-4">
    <h2>โตเกียว</h2>
    <p>กรุงโตเกียวเป็นเมืองหลวงของประเทศญี่ปุ่น ศูนย์กลางของบริเวณกรุงโตเกียวทั้งหมด,</p>
    และเมืองมหาชนที่มีประชากรมากที่สุดในโลก。</p>
  </div>
</div>
</div>
</body>
</html>

ทดลองด้วยตัวเอง

ถ้าคุณต้องการเรียนรู้เกี่ยวกับ Bootstrap มากยิ่งขึ้น โปรดอ่าน คู่มือเรียน Bootstrap.