طراحی وب ریسپانسیو HTML

طراحی وب پاسخگو چیست؟

  • RWD به معنای طراحی وب پاسخگو (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>با منطقه شهری بیش از ۱۳ میلیون جمعیت.</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>با منطقه شهری بیش از ۱۳ میلیون جمعیت.</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.