021-20483015

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

طراحی وب واکنش گرا یا همان 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>
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط