این آموزش در تاریخ ۱۴۰۰/۱۰/۲۲ آپدیت شده است.
آموزش واکنش گرایی صفحات وب قدم دوم
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش واکنش گرایی صفحات وب قدم دوم با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
آموزش واکنش گرایی صفحات وب قدم دوم
بیشتر عناصر ( تگ ها ) درون یک صفحه وب بخودی خود واکنش گرا هستن ، یعنی اگه ما فقط متای ویوپورت رو در قسمت Head صفحه قرار بدیم و یه متن بزاریم داخل تگ P بعدش رو هر صفحه نمایشی ( لپ تاپ ، موبایل و.. ) اون متن رو بخوایم ببینیم بدون هیچ مشکلی خودش واکنش گرا میشه.
ولی خب بعضی از تگ ها هستن که بخودی خود واکنش گرا نیستن، مثه تگ img یا مثلا تگ video یا مثلا یک جدول که تعداد ستون هاش خیلی زیاده ، اینا دیگه روی موبایل میبینی از صفحه میزنن بیرون و اسکرول درست میشه و در نهایت استایل سایت خراب میشه.
حال تو این جلسه میخوایم یاد بگیریم که چجوری میتونیم تصاویر و ویدئوهارو واکنش گرا کنیم ، طبیعتا اگه تصاویر در یک صفحه وب واکنش گرا نباشند میتونن در مرورگر اسکرول بصورت افقی ایجاد کنن و همین باعث میشه رابط کاربری ( یا UI و حتی تاثیر بروی UX ) بزاره.
مثال شماره ۱ : یه تصویر که اندازش خیلی بزرگه و واکنش گرا هم نیست
|
1 2 3 4 5 |
<body> <img src="files/mybg.jpg"> </body> |
همانطور که میبینید ، بخاطره بزرگ بودن اندازه تصویر بصورت افقی ( از سمت چپ و راست ) اسکرول ایجاد شده، که این اصلا کاربر پسند نیست و تو ذوق میزنه.
حالا چرا اسکرول میندازه؟! خب کاملا مشخصه ، چون اندازه تصویر بزرگه و از طرفی تصویر هم واکنش گرا نیست پس در نتیجه اسکرول میندازه و استایل سایت رو خراب میکنه.
حال اگه ما اندازه تصویرمون بزرگ باشه و بخوایم همواره فیت صفحه باشه و یجورایی خودشو با صفحه وفق بده و در نهایت نمیخوایم هم اسکرول بندازه ، خب باید چکار کنیم؟ اینجاست که واکنش گرایی میاد وسط.
Free-Learn
واکنش گرایی تصاویر
برای واکنش گرایی تصاویر چندین روش وجود داره، که در ادامه این روش هارو باهمدیگه کار خواهیم کرد، این روش ها به شرح زیر می باشند :
- استفاده از ویژگی Width و Height
- استفاده از ویژگی Max-Width ( روش پیشنهادی )
- استفاده از دستور Media@
- استفاده از تگ Picture
مثال شماره ۱ : استفاده از ویژگی Width و Height
|
1 2 3 4 5 6 7 8 |
<style> img{ width:100%; height:auto; } </style> |
مثال شماره ۲ : استفاده از ویژگی Max-Width ( بهترین روش )
|
1 2 3 4 5 6 7 |
<style> img{ max-width:100%; } </style> |
مثال شماره ۳ : استفاده از دستور Media@ ( تو این حالت باید از عکسمون ۲تا اندازه داشته باشیم، که مثلا اون اندازه بزرگ در صفحه نمایش های بزرگ مثه کامپیوتر نشون داده بشه و اندازه کوچیک روی مثلا موبایل )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> .MyImage { background-image: url("files/mybg-large.jpg"); background-repeat: no-repeat; height:560px; } /* روی گوشی موبایل */ @media only screen and (max-width: 400px) { .MyImage{ background-image: url("files/mybg-small.jpg"); background-repeat: no-repeat; height:170px; } } </style> |
مثال شماره ۴ : استفاده از تگ Picture ( مثه همون مثال قبلی هست، یعنی باید از عکسمون ۲تا اندازه داشته باشیم )
در مثال زیر داره میگه ، اگه اندازه عرض مرورگر کمتر از ۴۶۵ پیکسل شد تصویر ( mybg-small ) رو نمایش بده و اگه بیشتر از ۴۶۵ بود تصویر mybg-large که اندازه بزرگ هست رو نشون بده
|
1 2 3 4 5 6 7 8 |
<body> <picture> <source media="(max-width: 465px)" srcset="files/mybg-small.jpg"> <img src="files/mybg-large.jpg"> </picture> </body> |
Free-Learn
واکنش گرایی ویدئو ها
واکنش گرایی ویدئوها هم مثه تصاویر هست و فرقی ندارند، یعنی از همون روش ها میتونیم استفاده کنیم ولی خب معمولا و بیشتر از روش زیر برای واکنش گرایی ویدئوها استفاده میشه.
|
1 2 3 4 5 6 7 8 |
<style> video { max-width:100%; height:auto; } </style> |
Free-Learn
واکنش گرایی جدول ها
جدول ها هم از اون عناصری هستن که در برخی موارد نیازه که حتما واکنش گرا باشن، در حالت عادی یه جدول بخودی خود واکنش گراست ، مثلا یه جدول نهایت با ۵تا ستون در گوشی های موبایل هیچ مشکلی نداره.
ولی خب همین جدول با تعداد ستون های بیشتر در گوشی های موبایل ، هرچقدرم بخودش فشار بیاره و خودشو جمع بکنه بازم نمیتونه تمامی ستون هارو نشون بده و در نتیجه مجبور میشه اسکرول ایجاد کنه.
حال برای جلوگیری از این اسکرول در مرورگر، ما باید کاری کنیم که این اسکرول بصورت افقی در خوده جدول ایجاد بشه نه پنجره مرورگر ، برای اینکار خیلی راحت ، کافیه جدول رو بزاریم داخل یه تگ DIV و به همین تگ DIV ویژگی overflow-x بدیم، یا هم براش کلاس تعریف کنیم بعدش به کلاس overflow-x بدیم فرقی نمیکنه.
یعنی دیگه اسکرول تو مرورگر نمیوفته که بخواد استایل سایت رو خراب کنه ، اسکرول میوفته تو تگ دایوی که جدول رو گذاشتیم توش ، پس اینجوری کاربر میتونه با دستش اسکرول کنه و تمامی ستون های جدول رو ببینه.
|
1 2 3 4 5 |
<div style="overflow-x:auto;"> <table> ........ </table> </div> |
Free-Learn
نکات و توضیحات
- هدف اصلی از واکنش گرایی تصاویر و ویدئوها اینه که در دستگاهای مختلف ( مثه گوشی های موبایل یا تبلت ها و… ) بخوبی نمایش داده شوند و از ایجاد هرگونه اسکرول جلوگیری شود.
- بهترین و ساده ترین روش برای واکنش گرایی تصاویر و ویدئوها ، استفاده از ویژگی max-width می باشد.
- برای واکنش گرایی جداول هم به راحتی جدول را درون یک تگ div قرار دهید و سپس به تگ div ویژگی overflow-x با مقدار auto بدهید، به همین راحتی
