میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

طراحی صفحات ریسپانسیو

طراحی صفحات ریسپانسیو  یا واکنش گرا در Html چیست ؟

حتما تابحال با این موضوع روبرو شده اید که وقتی با موبایل یا تبلت خود در حال وبگردی هستید . با صفحاتی مواجه شوید که از لحاظ سایز و اندازه با موبایل یا تبلت شما همخوانی نداشته باشند. و برای دیدن مطلب یا لینک مورد نظر مادام عملیات zoom in و  zoom out کنید. این وبلاگ ها از تکنولوژی  ریسپانسیو بهره نمی برد.

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

همچنین گوگل از سال ۲۰۱۵، طراحی سایت ریسپانسیو (RWD) را یکی از عوامل رتبه بندی اعلام کرد.

 

چرا واکنش‌گرا بودن سایت مهم است؟

ریسپانسیو بودن صفحات باعث می‌شود کاربر حین مراجعه به سایت، تجربه‌ی بهتری داشته باشد. بدون نیاز به زوم کردن در صفحه تمام مطالب را بخواند، تصاویر را ببیند به گونه‌ای که استفاده از وب‌سایت برای او آزاردهنده نباشد.
همچنین واکنش‌گرایی صفحات اثر بسیار خوبی در سئو خواهد داشت. گوگل به وب‌سایت‌هایی که برای کاربران خود ارزش قائل شده و برای راحتی آنها طراحی مناسبی دارند، بیشتر توجه می‌کند! یعنی شانس شما برای قرارگیری در سطرهای اول از نتایج جستجو بیشتر می‌شود.

 

تنظیمات Viewport

برای ایجاد یک وب سایت ریسپانسیو ، تگ <meta> زیر را به تمام صفحات وب خود اضافه کنید .

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

 

با این کار نمای صفحه شما تنظیم می شود ، که به شما دستورالعمل هایی برای کنترل اندازه و مقیاس صفحه می دهد.

 

تصاویر در طراحی صفحات ریسپانسیو

تصاویر ریسپانسیو تصاویری هستند که به خوبی متناسب با هر اندازه مرورگری مقیاس بندی می شوند.
اگر ویژگیwidth در CSS روی ۱۰۰٪ تنظیم شود ، تصویر ریسپانسیو خواهد شد و مقیاس بالا و پایین می رود

<img src=”images.jpg” style=”width:100%;”>

توجه داشته باشید که در مثال بالا ، تصویر می تواند بزرگتر از اندازه اصلی خود باشد. یک راه حل بهتر ، در بسیاری از موارد ، استفاده از ویژگی max-width به جای آن است.
اگر ویژگی max-width  روی ۱۰۰٪ تنظیم شود ، اگر لازم باشد تصویر کوچک می شود ، اما هرگز اندازه آن بزرگتر از اندازه اصلی نیست .
به مثال زیر نگاه کنید :

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

 

تگ picture

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

<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>

 

Bootstrap

CSS فریم ورک های محبوب زیادی برای طراحی ریسپانسیو دارد که همگی آنها رایگان هستند .

یکی از فریم ورک های محبوب CSS ، بوت استرپ (Bootstrap) است. بوت استرپ از HTML ، CSS و jQuery برای ایجاد صفحات ریسپانسیو استفاده می کند. که می توانید در طراحی صفحات ریسپانسیو از ای فریم ورک محبوب هم استفاده کنید .

 

 

امیدواریم این بخش از آموزش در مورد طراحی صفحات ریسپانسیو نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .

 

ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟