به عنوان یک دانشجوی Microverse به مدت یک ماه، فهمیدم که اولین صفحات وب کلون من طرح واکنشی ندارند. من از پیکسل‌ها در Navbars استفاده می‌کردم، استفاده از درصد در یک بخش و rem در بخش دیگر. قاعده یا روش استانداردی نداشتم. هدف این بود که به صفحه اصلی در صفحه نمایش من شبیه شود.
هر چقدر که در این دوره پیشرفت کردم، متوجه شدم که این واحدها تفاوت زیادی در واکنش گرایی صفحه در اندازه‌های مختلف دارند. اینسپکتور کد می‌گوید صفحه وب خود را تنظیم کنم زیرا هنگام مشاهده متفاوت خواهد بود.
وقتی این مسائل را شروع کردم، درباره این موضوع تحقیق زیادی کردم. اما هنوز هم کمی در این مورد گیج بودم. هدف این مقاله ایجاد یک قانون ساده و مستقیم برای دستیابی به واکنش گرایی صفحه در کد هر توسعه دهنده است.
چرا باید صفحه وب خود را واکنش گرا کنیم؟
در حال حاضر، من از Lenovo Ideapad S145 برای نوشتن این مقاله استفاده می‌کنم، اندازه صفحه نمایش آن 15.6 اینچ است و صفحه وب Hackernoon به این شکل است:
من در حال مطالعه مقاله‌ای بودم. ناگهان Windows Update من شروع شد، بنابراین برای ادامه خواندن مجبور شدم به تلفن همراه خود تغییر وضعیت دهم. من یک Motorola G7 Plus دارم، اندازه صفحه نمایش آن 6.2 اینچ است، همان صفحه وب در این دستگاه اینگونه نمایش داده می‌شود:
تفاوت را دیدید؟ صفحه وب Hackernoon به اندازه کافی واکنش گرا است که می‌تواند هنگام تغییر اندازه صفحه، موقعیت و شکل ظاهری هر بخش را تغییر دهد. هنگام مشاهده صفحه وب، میتوانید این تغییرات را با بزرگنمایی و کوچک‌نمایی روی رایانه شخصی خود مشاهده کنید.
اکنون اگر این تغییرات ایجاد نشوند، خواندن آن مقاله بر روی تلفن همراه برای من بسیار دشوار می‌شود، زیرا برای دیدن برخی از مطالب باید به پیمایش چپ و راست ادامه دهم یا بزرگنمایی کنم.
راه‌حل این مشکل
برای حل این مشکلات، راه‌حل‌های زیادی داریم. که در این مقاله قصد دارم به دو مورد از آن‌ها بپردازم:
- واحدهای نسبی (rem ، em و درصد)
- کوئری‌های Media
واحدهای نسبی در مقابل واحدهای ثابت
هنگام استفاده از ویژگی‌های CSS مانند اندازه قلم، عرض، ارتفاع، حاشیه یا هر مورد دیگری که به واحد اندازه نیاز دارد، گزینه‌هایی دارید و آن‌ها به دو گروه تقسیم می‌شوند: واحدهای نسبی مانندrem ، em و درصد و واحدهایی ثابت مانند پیکسل. اولین گروه، گروهی است که باید از آن استفاده کنیم و تصاویر زیر دلیل آن را نشان می‌دهد.
در این تصویر، یک پنجره حداکثر داریم که دو باکس را نشان می‌دهد. من در بالایی از پیکسل و در پایینی از درصد استفاده کرده‌ام. اکنون بیایید ببینیم وقتی اندازه صفحه مرورگر خود را کوچک می‌کنم چه اتفاقی می‌افتد.
میتوانید نوار پیمایشی را ببینید؟ این اتفاق می‌افتد زیرا باکس بالا دارای یک مقدار واحد ثابت است، بنابراین حتی اگر اندازه پنجره را کوچک کنیم، عرض آن ادامه می‌یابد. کادر پایین دارای یک مقدار درصد است که به تغییر اندازه پنجره واکنش می‌دهد.
این اولین راه‌حل برای واکنش گرایی بیشتر صفحه وب شما است، اما هنوز کارمان تمام نشده است. می‌توانیم پروژه‌های خود را حتی بیشتر بهبود دهیم، نگاهی به بخش بعدی بیاندازید.
کوئری‌های Media
حال فرض کنید شما یک نوار افقی در یک صفحه وب دارید که دارای عرض 1024 پیکسل در یک لپ تاپ 1440 پیکسلی است. وقتی به صفحه نگاه می‌کنید، میتوانید هر آنچه را که در navbar نوشته شده است بخوانید و پیمایش در آن بسیار آسان است:
اما اگر آن را در تلفن همراه خود مشاهده کنید (عرض: 375 پیکسل)، ببینید چه اتفاقی می‌افتد که اگر از کوئری media استفاده نکنیم:
نوار پیمایش برگشته است! همچنین دیدید که برای navbar چه اتفاقی افتاد؟ این بد است، نه؟ موافقم. راه‌حل این مشکل استفاده از کوئری‌های مدیا در کد CSS برای تنظیم چیدمان هنگام متفاوت بودن اندازه صفحه است. میتوانید نگاهی به این مقاله از ترفندهای CSS در مورد نمایش داده‌های مدیا بیندازید. اکنون وقتی کوئری مدیا را اضافه می‌کنیم، صفحه وب بالا باید به این شکل باشد:
فوق‌العاده است. نوار پیمایشی هم از بین رفته است و همچنین navbar. مسئله این است که اکنون در این صفحه از آن دکمه منو استفاده شده است (قسمت بالای سبز، در کنار آیکن نور) که با کلیک بر روی آن، همان نوار ورودی به صورت عمودی فراهم می‌شود، جالب نیست؟
اگر می‌خواهید نتایج کار خود را به راحتی مشاهده کنید، میتوانید از Google Developer Tools استفاده کرده و به نوار ابزار دستگاه دسترسی پیدا کنید. جایی که میتوانید با عرض پنجره بازی کنید و نحوه اعمال تغییرات در هر نقطه کوئری مدیا را ببینید.
جمع بندی
در این مقاله سعی کردیم مفاهیم اساسی برخی از ابزارهای مورد نیاز برای ساخت یک صفحه وب واکنش گرا را به شما ارائه دهیم. اما اگر به راهنمای گام به گام دقیق تری نیاز دارید، توصیه می‌کنیم حتما این آموزش را مشاهده کنید. این مقاله نباید تنها منبع اطلاعاتی شما باشد، شما باید به لینک‌هایی که ارائه کردیم نگاهی بیندازید و قبل از ورود به پروژه خود، تحقیقات بیشتری انجام دهید.
خوشحال می‌شویم نظرات خود را در بخش زیر با ما در میان بگذارید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید