طراحی وب واکنشگرا
طراحی وب واکنش گرا چیست؟
طراحی وب واکنش گرا در مورد استفاده از 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 به شما این امکان را می‌دهد که تصویرهای مختلفی برای پنجره‌های مرورگر با سایزهای متفاوت تعریف کنید.
پنجره مرورگر را تغییر سایز دهید تا نحوه تغییر تصویر زیر را براساس تغییر عرض مشاهده کنید:
مثال
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
اندازه متن واکنش گرا
ندازه متن می‌تواند با واحد “vw” تنظیم شود، که یعنی “viewport width”.
با این کار اندازه متن از اندازه پنجره مرورگر پیروی می‌کند:
سلام بر شما
اندازه پنجره مرورگر را تغییر دهید تا نحوه تغییر سایز متن را مشاهده کنید.
مثال
<h1 style="font-size:10vw">Hello World</h1>
پرس و جوهای (Queries) رسانه ای
علاوه بر تغییر اندازه متن و تصویر، استفاده از پرس و جوهای رسانه ای(Media Queries) در صفحات وب نیز رایج است.
با پرس و جوهای رسانه ای می‌توانید استایل‌های کاملاً متفاوت را برای سایزهای مختلف مرورگر استفاده کنید.
مثال: سایز پنجره مرورگر را تغییر دهید تا ببینید که سه عنصر div زیر بطور افقی در صفحه نمایش‌های بلندتر و به شکل عمودی و روی هم (Stacked) در صفحه نمایش‌های کوچک نمایش داده می‌شوند:
منو چپ
محتوای اصلی
محتوای راست
مثال
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to add a breakpoint at 800px: */
@media screen and (max-width: 800px) {
.left, .main, .right {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
</style>
صفحه وب واکنش گرا - مثال کامل
یک صفحه وب واکنش گرا باشد در صفحه نمایش‌های رایانه‌های رومیزی بزرگ و موبایل‌های کوچک بخوبی دیده شود.
ساخت نمونه مثال این بخش در دست اقدام است.
صفحه وب واکنش گرا - 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.
مثال
html5
بوت استرپ
فریم ورک محبوب دیگر، بوت استرپ است که از HTML، CSS و jQuery برای ایجاد صفحات وب واکنش گرا استفاده می‌کند.
مثال
html5
منابع آموزشی