يلجأ البعض الى إضافات و هاك productات لجعل الموقع يتناسب مع مقاس شاشة الزائر
و لعل اغلب المواقع التي تلتفت لهذا الشي تستخدم إستايل style مُخصص لمقاس شاشات الجوال
لا داعي لهذا كله!!
دع إستايل styleك يتقلص و يتمدد بحسب مقاس شاشة الزائر تلقائياً بدون تغيير الإستايل style أو القالب template
نحن نتحدث عن
@media{}
و هي إحدى دوال css
وظيفتها ان تقوم بجعل الاستايل style مناسب لحجم مقاس شاشة الزائر دون نقص او زيادة
و دون ان تخرب مظهر الموقع
الآن سأعطيك مثال لم أستخدم فية الدالة السابقة
بعد الدخول على الصفحة قم بتصغير الشاشة او المتصفح , سترى ان لاشيء تغير
معاينة
الآن سأعطيك مثال و إستخدمت فية الدالة السابقة
بعد الدخول على الصفحة قم بتصغير الشاشة او المتصفح , سترى ان الإستايل style يصغُر كلما صغرت الشاشة
طھط؛ظٹظٹط± ظ…ظ‚ط§ط³ ط§ظ„ظ…ظˆظ‚ط¹ ط¨ظ†ظپط³ ط*ط¬ظ… ط´ط§ط´ط© ط§ظ„ط²ط§ط¦ط±
كيف تم ذلك؟
كل ذلك تم من خلال الدالة السابقة
فمثلاً لو ان عرض الاستايل style او القالب template عندي 980 بيكسل
بالطبع هذا العرض لن يناسب الزوار الذين معهم شاشات 960
لكنني بنفس الوقت لا اريد ان اقوم بتصميم إستايل style بعرض 960 عشان خاطر عيونهم
http://www.dzbatna.com/images/smilies/strongly.gif
إذاً كما ذكرت ان كان عرض الإستايل 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 مطوّر