آموزش واکنش گرایی در HTML به زبان ساده

رتبه: 0 ار 0 رای sssss
HTML
نویسنده: تیم تولید محتوا زمان مطالعه 3 دقیقه
Banner Image

طراحی وب سایت به صورت واکنش گرا باعث می شود تا صفحه وب به صورت مناسب، صحیح و سازگار با همه دستگاه ها (دسکتاپ، تبلت، تلفن هوشمند و …) نمایش داده شود.

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

تنظیم viewport

viewport، نمای دید یا همان نمای قابل نمایش در مرورگر می باشد. viewport را چگونه تنظیم کنیم؟

شیوه تنظیم viewport

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

تصاویری که می توانند به خوبی با اندازه هر مرورگری تغییر اندازه و مقیاس دهند، به عنوان تصاویر واکنش گرا شناخته می شوند.

چگونه تصویر را واکنش گرا بسازیم؟

استفاده از صفت width

اگر مقدار صفت width در CSS را ٪۱۰۰ تنظیم کنید، تصویر واکنش گرا و مقیاس آن کم و زیاد می شود.

مثال

<!DOCTYPE html>

<html>

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

<body>

<h2>Responsive Image</h2>

<p>When we set the CSS width property to ۱۰۰%, it makes the image responsive.

Resize the browser window to see the effect.</p>

<img src=”img_girl.jpg” style=”width:100%;”>( change image)

</body>

</html>

نکته: مشکل روش فوق (٪۱۰۰ width:) این است که اندازه تصویر ممکن است از اندازه اصلی آن بزرگتر شود. بنابراین، بهتر است به جای این صفت از صفتmax-width استفاده کنید.

استفاده از ویژگی max-width

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

مثال

<!DOCTYPE html>

<html>

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

<body>

<h2>Responsive Image</h2>

<p>”max-width:100%” makes the image responsive and also ensures that the image

doesn’t get bigger than its original size.</p>

<p>Resize the browser window to see the effect.</p>

<img src=”img_girl.jpg” style=”max-width:100%;height:auto;”> (Change the image)

</body>

</html>

تغییر تصاویر مطابق با عرض مرورگر

با استفاده از عنصر <picture>، می توانید دو یا چند تصویر را برای تطبیق با عرض مرورگر تنظیم کنید. با تغییر اندازه مرورگر مثل دسکتاپ و تلفن، تصویر تغییر می کند.

مثال

<!DOCTYPE html>

<html>

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

<body>

<h2>Change Images Depending on Browser Width</h2>

<p>Resize the browser width and the image will change at ۶۰۰px and ۱۵۰۰px.</p>

<picture>

<source srcset=”img_smallflower.jpg” media=”(max-width: ۶۰۰px)”>(Change image)

<source srcset=”img_flowers.jpg” media=”(max-width: ۱۵۰۰px)”>(Change image)

<source srcset=”flowers.jpg”>

<img src=”img_flowers.jpg” alt=”Flowers” style=”width:auto;”>

</picture>

</body>

</html>

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

می توانیم با استفاده از واحد “vw” اندازه متن را واکنش گرا بسازیم. vw مخفف viewport-width و به معنای عرض نمای دید است. با استفاده از این واحد، اندازه متن براساس صفحه نمایش پنجره مرورگر تنظیم می شود.

مثال

<!DOCTYPE html>

<html>

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

<body>

<h1 style=”font-size:10vw;”>Here size is ۱۰vw.</h1>

<p style=”font-size:6vw;”>Here size is ۶vw.</p>

<p style=”font-size:4vw;”>Here size is ۴vw.</p>

<p>Resize the browser window to see how the text size changes.</p>

</body>

</html>

نکته: viewport اندازه پنجره مرورگر را مشخص می کند. مقدار vw1 برابر است با ۱درصد از عرض پنجره مرورگر. به این معنی که اگر اندازه عرض پنجره مرورگر برابر با ۱۰۰سانتی متر باشد، vw1 برابر با ۱سانتی متر خواهد شد.

مدیا کوئری (media query)

از مدیا کوئری نیز می توانیم برای ایجاد وب سایت های واکنش گرا استفاده کنیم.

profile name
تیم تولید محتوا

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

مطالب پیشنهادی برای شما

محصولات مرتبط

مشاهده همه

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

1 2 3 4 5

0 نظر درباره «آموزش واکنش گرایی در HTML به زبان ساده»

    هنوز نظری برای این بخش ثبت نشده است
مشاهده همه نظرات
سبد خرید
سبد خرید شما خالی است
× جهت نصب روی دکمه زیر در گوشی کلیک نمائید
آی او اس
سپس در مرحله بعد برروی دکمه "Add To Home Screen" کلیک نمائید