|
إنضمامك إلي منتديات استراحات زايد يحقق لك معرفة كل ماهو جديد في عالم الانترنت ...
انضم الينا
#1
| ||
| ||
يلجأ البعض الى إضافات و هاكات لجعل الموقع يتناسب مع مقاس شاشة الزائر
__DEFINE_LIKE_SHARE__
و لعل اغلب المواقع التي تلتفت لهذا الشي تستخدم إستايل مُخصص لمقاس شاشات الجوال لا داعي لهذا كله!! دع إستايلك يتقلص و يتمدد بحسب مقاس شاشة الزائر تلقائياً بدون تغيير الإستايل أو القالب نحن نتحدث عن @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%; } } و بذلك تكمل مع جميع العناصر و تعطيها امر تقليص بحسب مقاس الشاشة الدرس من تقديم مدونة مطوّر |
مواقع النشر (المفضلة) |
| |
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
سوا مناسب لجميع الاذواق ..!! | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 10-01-2010 06:50 PM |
سوا مناسب لجميع الاذواق ..!! | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 10-01-2010 06:49 PM |
ويندوز فون 7: لجميع الشاشات | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 07-20-2010 04:30 AM |
كيف اضبط الواجة على مقاسات الشاشات | محروم.كوم | منتدى أخبار المواقع والمنتديات العربية والأجنبية | 0 | 05-02-2009 04:13 AM |
+:::+للمتصفحين بدون ردود+:::+اعضاء معنا ولكنهم لا يشاااركون+:::+ | مزيون بوظبي | الإستراحه العامة | 30 | 07-07-2008 05:33 AM |