ورود به کارتابل مشتریان وب مهراز
طراحی واکنش گرا ( resposive ) در HTML
یادگیری HTML
تعداد بازدید :
5554
تاریخ و ساعت انتشار :
سه شنبه 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>
نظر شما
>