طراحی واکنش گرا ( resposive ) در HTML

یادگیری HTML

تعداد بازدید : 4233

تاریخ و ساعت انتشار : سه شنبه 7 دی 1395 08:19

طراحی وب واکنش گرا یا همان responsive چیست؟

طراحی واکنش گرا باعث می شود صفحات وب سایت شما در تمامی دستگاه ها (دسکتاپ ، تبلت ، موبایل و ...) زیبا و مناسب دیده شود. در طراحی واکنش گرا ، هدف استفاده از CSS و HTML برای تغییر اندازه ، مخفی کردن ، جمع کردن ، گسترش دادن و انتقال دادن محتواست تا جایی که بر روی صفحه نمایش به خوبی و زیبا نشان داده شود.

نکته ! یک صفحه وب صرفنظر از دستگاه نمایش دهنده ، باید مناسب نمایش داده شده و برای کاربر ، استفاده از آن آسان باشد.

صفحات واکنش گرای خود را طراحی کنید

یکی از روش های ایجاد طراحی واکنش گرا ، ایجاد آن توسط خود شماست.

مثال :

طراحی واکنش گرا

<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
   float: right;
   margin: 10px;
   padding: 10px;
   max-width: 300px;
   height: 300px;
   border: 1px solid black;
   direction:rtl;
}  
h1,h2 {
	direction:rtl;
}
</style>
</head>
<body>

<h1>طراحی وب واکنش گرا</h1>
<h2>اندازه صفحه را تغییر دهید!</h2>
<div class="city">
  <h2>لندن</h2>
  <p>لندن پایتخت انگلستان و پر جمعیت ترین شهر این کشور است و دارای منطقه شهری با بیش از 13 میلیون از جمعیت می باشد.</p>
</div>
<div class="city">
  <h2>پاریس</h2>
  <p>پاریس پایتخت فرانسه و پرجمعیت ترین شهر فرانسه است. برج ایفل نیز نمای با شکوهی به آن داده است.
</p>
</div>
<div class="city">
  <h2>توکیو</h2>
  <p>توکیو پایتخت ژاپن ، مرکز ناحیه بزرگ توکیو و پرجمعیت ترین منطقه شهری در جهان است.</p>
</div>

</body>
</html>

مشاهده مثال

استفاده از w3.css

روش دیگر برای ایجاد صفحات واکنش گرا استفاده از یک فایل استایل شیت واکنش گرا مانند w3.css است. w3.css امکان ایجاد و توسعه صفحات زیبایی که در تمام دستگاه ها به درستی نمایش داده شوند را به راحتی فراهم می آورد :

مثال :

طراحی واکنش گرا با w3.css

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>
h1,h2,p {
	direction:rtl;
}
</style>
<body>

<div class="w3-container w3-orange">
  <h1>W3.CSS پیش نمایش</h1>      
  <p>اندازه صفحه را تغییر دهید.</p>      
</div>

<div class="w3-row-padding">

<div class="w3-third">
  <h2>لندن</h2>
  <p>لندن پایتخت انگلستان و پر جمعیت ترین شهر این کشور است و دارای منطقه شهری با بیش از 13 میلیون از جمعیت می باشد.</p>
</div>
<div class="w3-third">
  <h2>پاریس</h2>
  <p>پاریس پایتخت فرانسه و پرجمعیت ترین شهر فرانسه است. برج ایفل نیز نمای با شکوهی به آن داده است.
</p>
</div>
<div class="w3-third">
  <h2>توکیو</h2>
  <p>توکیو پایتخت ژاپن ، مرکز ناحیه بزرگ توکیو و پرجمعیت ترین منطقه شهری در جهان است.</p>
</div>

</div>

</body>
</html>

مشاهده مثال

دانلود فایل PDF مقاله درس بعدی درس قبلی

نظر شما

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.