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

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

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

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

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

نحن نتحدث عن

@media{}






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



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

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



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



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


معاينة


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



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


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





كيف تم ذلك؟



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



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

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



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



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

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

}

رمز Code:
فلا داعي لتغييرة

بل نقوم بإستخدام الدالة media لتقوم بتقليص العرض حسب مقاس الشاشة



فمثلاً اريد الإستايل او القالب يناسب حجم شاشات 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%;
} }

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



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