การออกแบบเว็บที่ตอบสนอง - กรอบงาน
มี CSS Framework ฟรีมากมายที่นำเสนอการออกแบบที่ตอบสนอง
การใช้ W3.CSS
วิธีที่ยอดเยี่ยมในการสร้างการออกแบบที่ตอบสนองคือการใช้สไตล์ชีตที่ตอบสนอง เช่นW3.CSS
W3.CSS ทำให้ง่ายต่อการพัฒนาไซต์ที่ดูดีในทุกขนาด!
W3.CSS สาธิต
ปรับขนาดหน้าเพื่อดูการตอบสนอง!
ลอนดอน
ลอนดอนเป็นเมืองหลวงของอังกฤษ
เป็นเมืองที่มีประชากรมากที่สุดในสหราชอาณาจักร โดยมีเขตมหานครที่มีประชากรมากกว่า 13 ล้านคน
ปารีส
ปารีสเป็นเมืองหลวงของฝรั่งเศส
พื้นที่ปารีสเป็นศูนย์กลางประชากรที่ใหญ่ที่สุดแห่งหนึ่งในยุโรป มีประชากรมากกว่า 12 ล้านคน
โตเกียว
โตเกียวเป็นเมืองหลวงของญี่ปุ่น
เป็นศูนย์กลางของเขตมหานครโตเกียวและเขตมหานครที่มีประชากรมากที่สุดในโลก
ตัวอย่าง
<!DOCTYPE html>
<html>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div
class="w3-container w3-blue">
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div
class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div>
<div
class="w3-third">
<h2>Paris</h2>
<p>Paris is
the capital of France.</p>
<p>The Paris area is one of the largest
population centers in Europe,
with more than 12 million
inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It
is the center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ W3.CSS โปรดอ่านบทช่วยสอน W3.CSSของ เรา
Bootstrap
เฟรมเวิร์กยอดนิยมอีกอันคือ Bootstrap มันใช้ HTML และ CSS เพื่อสร้างหน้าเว็บที่ตอบสนอง:
ตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta
name="viewport" content="width=device-width, initial-scale=1">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white
text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize
this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit
amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ Bootstrap ไปที่Bootstrap Tutorialของ เรา
เคยได้ยินเกี่ยวกับW3Schools Spacesไหม? ที่นี่คุณสามารถสร้างเว็บไซต์ของคุณตั้งแต่เริ่มต้นหรือใช้เทมเพลตและโฮสต์ได้ฟรี
เริ่มต้นฟรี ❯* ไม่ต้องใช้บัตรเครดิต