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

به طراحی که در هر پلاتفرم مانند موبایل، تبلت و دسکتاپ به خوبی نمایش داده شود و ظاهر آن متناسب با پلاتفرم تغییراتی جهت بهبود کارایی داشته باشد طراحی واکنشگرا گفته میشود.

متا تگ view port

هنگام ایجاد صفحات وب متا تگ زیر را حتما در قسمت head وارد نمایید.

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

در شکل زیر نحوه نمایش محتوای یک صفحه در مرور گر موبایل بدون تگ view port و با تگ view port را مشاهده می نمایید:
ریسپانسیو

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

چنانچه بر حسب درصد عرض تصاویر را تعیین کنیم می توانیم نمایش مطلوبی را در تمامی پلاتفرم ها نظاره کنیم.

قرار دادن عرض برابر ۱۰۰% باعث نمایش مطلوب و تمام عرض در گوش های همراه و تبلت  ها می شود همچنین برای دسکتاپ می توانیم از اتریبیوت max-width برای ماکسیسم کردن عرض به اندازه ی واقعی تصویر بهره ببریم. در مثال زیر عرض تصویر ۱۰۰% تعیید شده اما عرض عکس بیشتر از مقداری که خود تصویر بر حسب پیکسل دارد بیشتر نمیشود.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<img "http://blog.tehrancode.com/wp-content/uploads/طراحی-سایت-تهرانکد-Copy.jpg" style="max-width:100%;height:auto;">

<p>Resize the browser window.</p>

<p>"max-width:100%" prevents the image from getting bigger than its original size.</p>

<p>However, if you make the browser window smaller, the image will still scale down.</p>

</body>
</html>

نمایش تصاویر مختلف در عرض های مختلف

قطعه کد زیر چگونگی نمایش تصاویر در عرض های مختلف صفحه نمایشگر های مختلف را نشان می دهد:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

<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_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

<p>Resize the browser width and the image will change at 600px and 1500px.</p>

</body>
</html>

تغییر سایز متن با تغییر عرض صفحه نمایش

در قطعه کد زیر چگونگی تعیین عرض برای نمایش در نمایشگر های مختلف را مشاهده می نمایید:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>

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

<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>

<p style="font-size:5vw;">Use the "vw" unit when sizing the text. 10vw will set the size to 10% of the viewport width.</p>

</body>
</html>

 

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *