المشاركة الأصلية كتبت بواسطة: عبدالاله الهذلي طيب وطريقة صعبة ولمطولة
إذا عندك خبرة في التعامل مع CSS3 فلا يوجد اي صعوبة
كما قلت لك شرح جعل ستايل متجاوب مع الجوال وجميع الشاشات المختلفة هي طريقة مطولة
لكن ساوجزها لك باختصار سريع فهي تتم عبر خاصية
CSS media queries
و هي أحد خصائص CSS3 وهي لمعرفة ولتحديد قياس شاشة العرض الجهاز المراد عمل تنسيق له
ثم تضيف أكواد CSS اسفل ملف style.css الخاص بالاستايل:
مثال :
يتصفح منتداي شخص من شاشة جوال عرضها أقل من 480px
فتضيف هذا الكود في الأسفل تماماً ملف style.css الخاص بالاستايل
CODE
@media screen and (max-width: 480px) {<br />
<br />
وهنا تضيف جميع الكلاسات التي تريد ان تغييرها لتتوافق مع عرض الشاشة الأقل من 480px<br />
مثلاً لتغير العرض <br />
width: 40%;<br />
min-width: 40%;<br />
أو الإخفاء <br />
display: none;<br />
<br />
الخ ........ <br />
<br />
}<br />
وكل مرة تعمل تعديل افتح المنتدى وصغر الشاشة أي حاول تكبير/تصغير دقة الشاشة وشاهد تعديلاتك الجديدة على الشاشة الصغيرة
و لعمل تصميم المتجاوب يعمل على عدة قياسات أخرى مختلفة لأجهزة يتم عمل تنسيق css لكل قياس بشكل التالي:
CODE
<br />
@media screen and (max-width:1280px) {<br />
// CSS STYLE FOR DESKTOP<br />
<br />
} @media screen and (max-width:900px) { <br />
// CSS STYLE FOR TAPLETS<br />
} <br />
@media screen and (max-width:736px) { <br />
// CSS STYLE FOR PHONES<br />
} <br />
@media screen and (max-width:300px) { <br />
// CSS STYLE FOR SMALL PHONES<br />
}<br />
اضافة إلى أنه يجب أن تضيف كود meta viewport في ما بين وسم head في قالب headinclud الخاص بالأستايل
لتعمل خاصية التجاوب على أجهزة المحمولة كهواتف
CODE
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
لمزيد من التفاصيل شاهد ملف style.css للأستايل الافتراضي للنسخة او لأي ستايل آخر متوافق اجهزة الجوال السابق ذكرها في ردي السابق
هذا ما استطيع ان افيدك به على عجاله ..
ارجو ان تعذرنا فأنا اعلم انك تريد شرح مفصل ومطول
لكنه سيأخذ وقت طويل لفرز جميع كلاسات CSS الخاصة بالاستايل وهي كثيرة وتغييرها وجعله متوافقه على حسب الشاشة وانا لايتوفر لدي مثل هذا الوقت
انا فقط عطيتك المفاتيح ومسكتك أول الخيط والباقي عليك
موفق
[ طلب شرح ] كيف اجعل الاستايل يتوافق مع الجوالات
