من اهم الامور التي وجب علينا توضيفها عند تصميم موقع هو جعل متوافق مع جميع الاجهزة سواءا الكمبيوترات او الهواتف أو اللوحات الاكترونية .
من خلال هذا الشرح سنحاول ان نجعلك تدرك كيفية عمل أو جعل موقع متوافق مع جميع الأجهزة فقط ببعض الخطوات و بشرح مميز جدا لكي يسهل على الكل ادراكه . هذا صورة لموقع متوافق
طريقة تجعل موقع او مدونة متجاوب يدعم جميع الشاشات
تابع الشرح الاتي :
كما ترى في الصورة فشكل القالب (الموقع) يختلف من جهاز لجهاز دون تغيير اي شيء (يحدث تلقائيا) و هذا بسهولة عبر بعض الأكواد التي تجعل من القالب ستناسب مع كل شكل أو جهاز . كمثال لذلك نذكر مدونة حكمات يمكن تجربة تصفحها في اي جهاز بمقياس ما و سترى الفرق ، انه بالفعل متوافق و متناسق مع الكل .
الى هنا لجعل قالب أو موقع أو مدونة أو .... متوافق و يدعم جميع الاجهزة فما علينا سوى اضافة هذه الاكواد و العمل عليها بحيت نجعلها تتوافق مع الشكل المجدد . (اعتقد ان شرح غير مفهوم اوك لنرى المثال )
سنقوم بانشاء مثلا موقع عبارة عن صورة و نص بحيث سنحاول أن نجعله متوافق مع جميع الأجهزة حسنا لنرى دلك .
كما ترى ها قد انشئنا موقع لكنه غير متوافق ، اذن سنحاول ان نجعله متناسق عبر هذه الاكواد
/* CSS Global Responsive */
/* laptops */
@media screen and (max-width:960px) {
}
/* Tablets */
@media only screen and (max-width:768px) {
}
/* Small Tablets */
@media only screen and (min-width:640px){
}
/* Large Mobile */
@media only screen and (max-width:480px){
}
/* Mobile */
@media screen and (max-width:320px){
}
بعد اضافة الاكواد و التعديل عليها بما يناسب (تعديل العرض و الجهة WIDTH , FLOAT) اصبح الموقع جاهزا و متوافق مع جميع الاجهزة ذات الاشكال المختلفة .
ما عليك بعد اضافة الاكواد سوى تغيير مقياس كل اضافة بما يناسب العرض .
لأي استفسار ضعه على التعليق .
