من اهم الامور التي وجب علينا توضيفها عند تصميم موقع هو جعل متوافق مع جميع الاجهزة سواءا الكمبيوترات او الهواتف أو اللوحات الاكترونية .
من خلال هذا الشرح سنحاول ان نجعلك تدرك كيفية عمل أو جعل موقع متوافق مع جميع الأجهزة فقط ببعض الخطوات و بشرح مميز جدا لكي يسهل على الكل ادراكه . هذا صورة لموقع متوافق
طريقة تجعل موقع او مدونة متجاوب يدعم جميع الشاشات
تابع الشرح الاتي :
كما ترى في الصورة فشكل القالب (الموقع) يختلف من جهاز لجهاز دون تغيير اي شيء (يحدث تلقائيا) و هذا بسهولة عبر بعض الأكواد التي تجعل من القالب ستناسب مع كل شكل أو جهاز . كمثال لذلك نذكر مدونة حكمات يمكن تجربة تصفحها في اي جهاز بمقياس ما و سترى الفرق ، انه بالفعل متوافق و متناسق مع الكل .
الى هنا لجعل قالب أو موقع أو مدونة أو .... متوافق و يدعم جميع الاجهزة فما علينا سوى اضافة هذه الاكواد و العمل عليها بحيت نجعلها تتوافق مع الشكل المجدد . (اعتقد ان شرح غير مفهوم اوك لنرى المثال )
سنقوم بانشاء مثلا موقع عبارة عن صورة و نص بحيث سنحاول أن نجعله متوافق مع جميع الأجهزة حسنا لنرى دلك .
كما ترى ها قد انشئنا موقع لكنه غير متوافق ، اذن سنحاول ان نجعله متناسق عبر هذه الاكواد
بعد اضافة الاكواد و التعديل عليها بما يناسب (تعديل العرض و الجهة WIDTH , FLOAT) اصبح الموقع جاهزا و متوافق مع جميع الاجهزة ذات الاشكال المختلفة .
ما عليك بعد اضافة الاكواد سوى تغيير مقياس كل اضافة بما يناسب العرض .
لأي استفسار ضعه على التعليق .
من خلال هذا الشرح سنحاول ان نجعلك تدرك كيفية عمل أو جعل موقع متوافق مع جميع الأجهزة فقط ببعض الخطوات و بشرح مميز جدا لكي يسهل على الكل ادراكه . هذا صورة لموقع متوافق
طريقة تجعل موقع او مدونة متجاوب يدعم جميع الشاشات
تابع الشرح الاتي :
كما ترى في الصورة فشكل القالب (الموقع) يختلف من جهاز لجهاز دون تغيير اي شيء (يحدث تلقائيا) و هذا بسهولة عبر بعض الأكواد التي تجعل من القالب ستناسب مع كل شكل أو جهاز . كمثال لذلك نذكر مدونة حكمات يمكن تجربة تصفحها في اي جهاز بمقياس ما و سترى الفرق ، انه بالفعل متوافق و متناسق مع الكل .
الى هنا لجعل قالب أو موقع أو مدونة أو .... متوافق و يدعم جميع الاجهزة فما علينا سوى اضافة هذه الاكواد و العمل عليها بحيت نجعلها تتوافق مع الشكل المجدد . (اعتقد ان شرح غير مفهوم اوك لنرى المثال )
سنقوم بانشاء مثلا موقع عبارة عن صورة و نص بحيث سنحاول أن نجعله متوافق مع جميع الأجهزة حسنا لنرى دلك .
كما ترى ها قد انشئنا موقع لكنه غير متوافق ، اذن سنحاول ان نجعله متناسق عبر هذه الاكواد
/* 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) اصبح الموقع جاهزا و متوافق مع جميع الاجهزة ذات الاشكال المختلفة .
ما عليك بعد اضافة الاكواد سوى تغيير مقياس كل اضافة بما يناسب العرض .
لأي استفسار ضعه على التعليق .
الكاتب : king25
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق
ليست هناك تعليقات:
إرسال تعليق