طريقة تجعل موقع او مدونة متجاوب يدعم جميع الشاشات

من اهم الامور التي وجب علينا توضيفها عند تصميم موقع هو جعل متوافق مع جميع الاجهزة سواءا الكمبيوترات او الهواتف أو اللوحات الاكترونية .

من خلال هذا الشرح سنحاول ان نجعلك تدرك كيفية عمل أو جعل موقع متوافق مع جميع الأجهزة فقط ببعض الخطوات و بشرح مميز جدا لكي يسهل على الكل ادراكه . هذا صورة لموقع متوافق

طريقة تجعل موقع او مدونة متجاوب يدعم جميع الشاشات

تابع الشرح الاتي :


كما ترى في الصورة فشكل القالب (الموقع) يختلف من جهاز لجهاز دون تغيير اي شيء (يحدث تلقائيا) و هذا بسهولة عبر بعض الأكواد التي تجعل من القالب ستناسب مع كل شكل أو جهاز . كمثال لذلك نذكر مدونة حكمات يمكن تجربة تصفحها في اي جهاز بمقياس ما و سترى الفرق ، انه بالفعل متوافق و متناسق مع الكل .

الى هنا لجعل قالب أو موقع أو مدونة أو .... متوافق و يدعم جميع الاجهزة فما علينا سوى اضافة هذه الاكواد و العمل عليها بحيت نجعلها تتوافق مع الشكل المجدد . (اعتقد ان شرح غير مفهوم اوك لنرى المثال )

سنقوم بانشاء مثلا موقع عبارة عن صورة و نص بحيث سنحاول أن نجعله متوافق مع جميع الأجهزة حسنا لنرى دلك .

اضغط هنا

كما ترى ها قد انشئنا موقع لكنه غير متوافق ، اذن سنحاول ان نجعله متناسق عبر هذه الاكواد

/* 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) اصبح الموقع جاهزا و متوافق مع جميع الاجهزة ذات الاشكال المختلفة .

اضغط هنا لترى قبل اضافة الاكواد

بعد اضافة الاكواد

ما عليك بعد اضافة الاكواد سوى تغيير مقياس كل اضافة بما يناسب العرض .
لأي استفسار ضعه على التعليق .