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

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



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

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

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


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

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


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

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

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




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




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

مقالات ذات صلة

Previous
Next Post »

8 التعليقات

التعليقات
9/12/2015 delete

http://tariklihtirraf.blogspot.com

Reply
avatar
9/12/2015 delete

9alabi howa vienna lit 2 w ahtaj ba3d lmosa3ada
hada facebooki
https://www.facebook.com/mazouzi.mohamad

Reply
avatar
2/19/2016 delete

يامحترم حضرتك حطيت الاكواد وطريقه تركيبها ازاي يامحترم ف القالب طب فين

Reply
avatar
2/19/2016 delete

وطريقة تركيبها ازاي ياحلو

Reply
avatar
7/26/2016 delete

أرجو تقييم موقعي وشكرا
شبكة بلا حدود الإخبارية
www.bilahodod.net

Reply
avatar
3/15/2017 delete

كتر الاعلانات يا اولاد الكلب

Reply
avatar

المروجوا احترام سياسة المدونة و عمل بها و شكرا ااا