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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از ریسپانسیو در html)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML


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

طراحی وب واکنش گرا در مورد استفاده از HTML و CSS برای تغییر اندازه، پنهان کردن، کوچک یا بزرگ کردن یک وبسایت بطور خودکار است تا در همهٔ دستگاه‌ها (موبایل، تبلت‌ها و رایانه‌های رومیزی) خوب بنظر برسد:[۱]

مشاهدهٔ نتیجه


توجه: یک صفحه وب باید در هر دستگاهی خوب بنظر برسد!

تنظیم Viewport

هنگام ایجاد صفحات وب واکنش گرا، عنصر <meta> را در همه صفحات وب خود اضافه کنید:

مثال

<meta name="viewport" content="width=device-width, initial-scale=1.0">


مشاهدهٔ نتیجه


این کار Viewport صفحه شما را تنظیم می‌کند، که دستورات مربوط به نحوه کنترل ابعاد و مقیاس بندی صفحه را به مرورگر خواهد داد.

در اینجا مثالی از یک صفحه وب بدون تگ meta Viewport و همان صفحه با تگ meta viewport نشان داده می‌شود:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.

نکته: اگر این صفحه را در موبایل یا تبلت می‌بینید، می‌توانید روی دو لینک بالا کلیک کنید تا تفاوت را مشاهده کنید.

تصاویر واکنش گرا

تصاویر واکنش گرا تصویرهایی هستند که بخوبی با هر اندازه مرورگری سازگار می‌شوند.

استفاده از خصوصیت width

اگر خصوصیت width در CSS برابر با ۱۰۰٪ تنظیم شده باشد، تصویر واکنش گرا خواهد بود و بزرگ و کوچک می‌شود:

مثال

<img src="img_girl.jpg" style="width:100%;">


مشاهدهٔ نتیجه


توجه کنید که در مثال بالا، تصویر می‌تواند افزایش مقیاس دهد و بزرگتر از سایز اصلی خود شود. یک راه حل بهتر، در بسیاری از موارد، استفاده از خصوصیت جایگزین max-width خواهد بود.

استفاده از خصوصیت max-width

اگر خصوصیت max-width برابر با ۱۰۰٪ تنظیم شود، اندازه تصویر اگر لازم باشد کاهش می‌یابد اما هرگز بزرگتر از سایز اصلی خود نمی‌شود:

مثال

<img src="img_girl.jpg" style="max-width:100%;height:auto;">


مشاهدهٔ نتیجه


نمایش تصویرهای مختلف براساس عرض مرورگر

عنصر <picture> در HTML به شما این امکان را می‌دهد که تصویرهای مختلفی برای پنجره‌های مرورگر با سایزهای متفاوت تعریف کنید.

پنجره مرورگر را تغییر سایز دهید تا نحوه تغییر تصویر زیر را براساس تغییر عرض مشاهده کنید:

Flowers

مثال

1 <picture>
2   <source srcset="img_smallflower.jpg" media="(max-width: 600px)">
3   <source srcset="img_flowers.jpg" media="(max-width: 1500px)">
4   <source srcset="flowers.jpg">
5   <img src="img_smallflower.jpg" alt="Flowers">
6 </picture>


مشاهدهٔ نتیجه


اندازه متن واکنش گرا

ندازه متن می‌تواند با واحد “vw” تنظیم شود، که یعنی “viewport width”.

با این کار اندازه متن از اندازه پنجره مرورگر پیروی می‌کند:

سلام بر شما

اندازه پنجره مرورگر را تغییر دهید تا نحوه تغییر سایز متن را مشاهده کنید.

مثال

<h1 style="font-size:10vw">Hello World</h1>


مشاهدهٔ نتیجه

Viewport اندزه پنجره مرورگر است. 1vw = 1% از عرض Viewport است. اگر عرض ۵۰ ،Viewport سانتیمتر باشد، 1vw برابر با ۰٫۵ سانتیمتر است.

پرس و جوهای (به انگلیسی: Queries) رسانه ای

علاوه بر تغییر اندازه متن و تصویر، استفاده از پرس و جوهای رسانه ای(Media Queries) در صفحات وب نیز رایج است.

با پرس و جوهای رسانه ای می‌توانید استایل‌های کاملاً متفاوت را برای سایزهای مختلف مرورگر استفاده کنید.

مثال: سایز پنجره مرورگر را تغییر دهید تا ببینید که سه عنصر div زیر بطور افقی در صفحه نمایش‌های بلندتر و به شکل عمودی و روی هم (به انگلیسی: Stacked) در صفحه نمایش‌های کوچک نمایش داده می‌شوند:

منو چپ

محتوای اصلی

محتوای راست

مثال

 1 <style>
 2 .left, .right {
 3   float: left;
 4   width: 20%; /* The width is 20%, by default */
 5 }
 6 
 7 .main {
 8   float: left;
 9   width: 60%; /* The width is 60%, by default */
10 }
11 
12 /* Use a media query to add a breakpoint at 800px: */
13 @media screen and (max-width: 800px) {
14   .left, .main, .right {
15     width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
16   }
17 }
18 </style>


مشاهدهٔ نتیجه

نکته: برای یادگیری بیشتر در مورد Media Queries و طراحی وب واکنش گرا، آموزش RWD ما را مطالعه کنید.

صفحه وب واکنش گرا - مثال کامل

یک صفحه وب واکنش گرا باشد در صفحه نمایش‌های رایانه‌های رومیزی بزرگ و موبایل‌های کوچک بخوبی دیده شود.

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مشاهدهٔ نتیجه


صفحه وب واکنش گرا - Frameworkها

فریم ورک‌های CSSبسیاری وجود دارند که طراحی واکنشگرا را پیشنهاد می‌کنند.

آنها رایگان بوده و استفاده از آنها آسان است.

استفاده از WikiCod.CSS

یک روش عالی برای ایجاد طراحی واکنش گرا، استفاده از برگه استایل واکنش گرا مانند W3.CSS است.

W3.CSS توسعه سایت‌هایی که در هر اندازه‌ای خوب بنظر می‌رسند؛ مانند رایانه رومیزی، لپ تاپ، تبلت یا موبایل را ساده می‌کند.

W3.CSS

WikiCod Demo

Resize this responsive page!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.

The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.

It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

مثال

1 html5


مشاهدهٔ نتیجه

برای یادگیری بیشتر W3.CSS آموزش WikiCod.CSS ما را مطالعه کنید.

بوت استرپ

فریم ورک محبوب دیگر، بوت استرپ است که از HTML، CSS و jQuery برای ایجاد صفحات وب واکنش گرا استفاده می‌کند.

مثال

1 html5


مشاهدهٔ نتیجه

برای یادگیری بیشتر در مورد بوت استرپ به آموزش بوت استرپ ما مراجعه کنید.


منابع آموزشی