التصميم المتجاوب متوفر في كل مكان ، وسواء كنت تستخدم إطارًا أو تكتب استعلامات الوسائط بنفسك ، فإن بعض عناصر صفحتك ملزمة بالتحرك أو القياس.
إذا كانت استعلامات الوسائط الخاصة بك مبنية على أبعاد المستعرض ويتم تغيير حجم المستعرض ، فإن عناصرك ستقفز في مكانها. إضافة القليل من الرسوم المتحركة إلى تلك الخصائص هي لمسة لطيفة لأي موقع سريع الاستجابة.
اليوم ، سوف أريك مدى سهولة إضافة هذه اللمسة الإضافية ، من خلال تحريك عرض وعتامة العناصر بين استعلامات الوسائط.
في هذا المثال البسيط ، سنستخدم div ، يحتوي على 3 div أصغر. سيتم قياس div وفقًا لحجم نافذة المستعرض. HTML بسيط:
الآن ، ستضع CSS الرئيسية الصناديق الثلاثة داخل div الرئيسي وأيضا ، تمشيا مع الهامش إلى اليمين:
.layout {width:960px;height:600px;background:#b34d6f;margin:auto;}.box {width:300px;height:200px;margin-right:25px;background:#4d77b3;display:inline-block;margin-top:50px;}.box:last-child {margin-right:0px;}هذا هو تخطيطنا الرئيسي ، بدون استعلامات الوسائط ، ولن يتكيف هذا التخطيط إذا تغير منفذ العرض. الآن بعد أن وصلنا الأساسيات في مكانها ، دعنا نضيف استعلامات الوسائط.
يتم استخدام استعلامات الوسائط بشكل متكرر في الوقت الحاضر. يفهمها معظم مصممي الويب ، ولكن في حال كانت هذه هي المرة الأولى ، فإليك تحديثًا سريعًا: استعلامات الوسائط تحقق من قدرة الجهاز الذي تستخدمه (العرض والاتجاه ودقة الوضوح) وتقوم بتشغيل CSS محدد إذا كانت الشروط المحددة للوسائط استيفاء الاستعلام. في مثالنا ، سنستخدم استعلامات الوسائط التي ستتحقق مما إذا كان المتصفح أصغر من 960 بكسل ، وما إذا كان أصغر من 660 بكسل. وسنقوم بعد ذلك بتعيين عرض العناصر وفقًا لذلك ، وسنعمل أيضًا على إخفاء آخر div div بحيث يكون للاثنين الآخرين مساحة أكبر:
@media screen and (max-width:960px) {.layout {width: 870px;}.box {width:270px;}}@media screen and (max-width: 660px) {.layout {width:570px;}.box {width:170px;}.box:last-child {opacity:0;}}هذا كل ما نحتاجه لاستفسارات وسائل الإعلام لدينا. لاحظ أنه من المهم وضع هذا الرمز أسفل رمز CSS الأصلي أعلاه بحيث تستجيب استعلامات الوسائط للكود فوقها. إذا قمت باختبار الملف الخاص بك الآن ، فسترى حجم تغيير divs وتغير عتامة div الطفل الأخير عند تغيير حجم إطار المستعرض.
ستلاحظ أنه لإخفاء آخر طفلة طفلة ، فإننا نضبط مستوى التعتيم على 0 بدلاً من تعيينه للعرض: لا شيء. هذا لأننا نريد أن نكون قادرين على تحريك الممتلكات ؛ العتامة لديها العديد من الدرجات المختلفة ، في حين أن العرض إما صحيح أو خطأ (وبالتالي لا يمكن تحريكه).
أثبتت رسوم متحركة CSS أنها مفيدة بالفعل عند تنفيذ هذه الرسوم المتحركة الصغيرة التي كنا نستخدمها في jQuery ، مثل تحريك اللون والعرض والعتامة.
نظرًا لأننا نريد أن يتم تحريك الصفحة ككل ، فإننا نستخدم محدد CSS * ونقوم بإعداد الرسوم المتحركة الخاصة بنا. تتراجع رسوم متحركة CSS بسلاسة ، لكنك ستحتاج إلى إضافة بادئات البائع أيضًا ، بحيث يتوفر أكبر قدر ممكن من الدعم:
*{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease;}يمكنك رؤية النتيجة النهائية هنا.
إضافة رسوم متحركة بسيطة مثل هذه ، لمسة نهائية رائعة لأي موقع. تضيف بضعة أسطر من الرمز تلميعًا رائعًا إلى موقعك المتجاوب.
هل قمت بتحريك استعلامات الوسائط في مشروع؟ ما هي الآثار التي حققتها؟ اسمحوا لنا أن نعرف في التعليقات.