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

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	مقدمه
۳	ویرایشگرها
۴	پایه
۵	عنصرها
۶	ویژگی‌ها
۷	عنوان‌ها
۸	پاراگراف‌ها
۹	استایل‌ها
۱۰	قالب‌بندی
۱۱	نقل‌قول‌ها
۱۲	توضیحات
۱۳	رنگ‌ها RGB HEX HSL
۱۴	CSS
۱۵	لینک‌ها رنگ‌های لینک نشانک‌های لینک
۱۶	تصاویر نقشه‌های تصویری تصاویر پس‌زمینه عنصر Picture
۱۷	جداول
۱۸	لیست‌ها لیست نامرتب لیست مرتب لیست‌های دیگر
۱۹	بلوک‌ها
۲۰	کلاس‌ها
۲۱	شناسه
۲۲	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 نشان داده می‌شود:

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

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

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

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

استفاده از خصوصیت 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 به شما این امکان را می‌دهد که تصویرهای مختلفی برای پنجره‌های مرورگر با سایزهای متفاوت تعریف کنید.

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

مثال

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 ما را مطالعه کنید.

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

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

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

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

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

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

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

استفاده از WikiCod.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.

مثال

1html5

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

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

بوت استرپ

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

مثال

1html5

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

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

صفحهٔ بعد»

«صفحهٔ قبل