ظƒظٹظپ طھط¬ط¹ظ„ ط¥ط³طھط§ظٹظ„ ظ…ظˆظ‚ط¹ظƒ ظ…ظ†ط§ط³ط¨ ظ„ط¬ظ…ظٹط¹ ظ…ظ‚ط§ط³ط§طھ ط§ظ„ط´ط§ط´ط§طھ ط¨ط¯ظˆظ† طھط؛ظٹظٹط±ط© ط*طھظ‰ ظ„ظ„ظ…طھطµظپط*ظٹظ† ظ…ظ† ط§ظ„ط¬ظˆط§ظ„


يلجأ البعض الى إضافات و هاك productات لجعل الموقع يتناسب مع مقاس شاشة الزائر

و لعل اغلب المواقع التي تلتفت لهذا الشي تستخدم إستايل style مُخصص لمقاس شاشات الجوال

لا داعي لهذا كله!!

دع إستايل styleك يتقلص و يتمدد بحسب مقاس شاشة الزائر تلقائياً بدون تغيير الإستايل style أو القالب template

نحن نتحدث عن

@media{}



و هي إحدى دوال css



وظيفتها ان تقوم بجعل الاستايل style مناسب لحجم مقاس شاشة الزائر دون نقص او زيادة

و دون ان تخرب مظهر الموقع



الآن سأعطيك مثال لم أستخدم فية الدالة السابقة



بعد الدخول على الصفحة قم بتصغير الشاشة او المتصفح , سترى ان لاشيء تغير


معاينة


الآن سأعطيك مثال و إستخدمت فية الدالة السابقة



بعد الدخول على الصفحة قم بتصغير الشاشة او المتصفح , سترى ان الإستايل style يصغُر كلما صغرت الشاشة


طھط؛ظٹظٹط± ظ…ظ‚ط§ط³ ط§ظ„ظ…ظˆظ‚ط¹ ط¨ظ†ظپط³ ط*ط¬ظ… ط´ط§ط´ط© ط§ظ„ط²ط§ط¦ط±





كيف تم ذلك؟



كل ذلك تم من خلال الدالة السابقة



فمثلاً لو ان عرض الاستايل style او القالب template عندي 980 بيكسل

بالطبع هذا العرض لن يناسب الزوار الذين معهم شاشات 960



لكنني بنفس الوقت لا اريد ان اقوم بتصميم إستايل style بعرض 960 عشان خاطر عيونهم



إذاً كما ذكرت ان كان عرض الإستايل style او القالب template 980 بيكسل

رمز Code:
#pagewrap { width: 980px; }

رمز Code:
فلا داعي لتغييرة بل نقوم بإستخدام الدالة media لتقوم بتقليص العرض حسب مقاس الشاشة فمثلاً اريد الإستايل style او القالب template يناسب حجم شاشات 960 نقوم بإضافة أمر التقليص في ملف Css كتالي

رمز Code:
@media screen and (max-width: 960px) { #pagewrap { width: 95%; }}

رمز Code:
و بإمكانك تقليصة بالبيكسل و ليس بالنسبة المئوية – الامر عاد إلى إختيارك و هكذا مع جميع مقاسات الشاشات ايضا بإمكانك إضافة اكثر من امر لأكثر من مقاس فلو أحببنا ان ندعم المتصفحين من جهاز آي فون - عرض شاشة الآي فون هي 480 بيكسل- نقوم بإضافة امر التقليص بعرض يناسب عرض شاشة الآي فون تقريباً نقلص الى ما نسبتة 40%





رمز Code:
@media screen and (max-width: 480px) { #pagewrap { width: 40%; } }

و بذلك تكمل مع جميع العناصر و تعطيها امر تقليص بحسب مقاس الشاشة



الدرس مفصل من تقديم مدونة blog مطوّر








©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى©