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

تصميم متجاوب

من ويكيبيديا، الموسوعة الحرة
(بالتحويل من التصميم المتجاوب)
اذهب إلى التنقل اذهب إلى البحث
Question book-new.svg
تعرَّف على طريقة التعامل مع هذه المسألة من أجل إزالة هذا القالب.يفتقر محتوى هذه المقالة إلى الاستشهاد بمصادر. فضلاً، ساهم في تطوير هذه المقالة من خلال إضافة مصادر موثوقة. أي معلومات غير موثقة يمكن التشكيك بها وإزالتها. (أغسطس 2019)
Mergefrom.svg
لقد اقترح دمج ونقل محتويات هذه المقالة إلى التصميم المستجيب لمواقع الويب. (ناقش) (ديسمبر 2020)

التصميم المتجاوب (بالإنجليزية: Responsive Design)‏ هو أسلوب لتصميم مواقع الويب يسمح بإنشاء موقع ويب يتكيف مع الجهاز الذي يتم عرضه عليه، فإذا كان جهاز كمبيوتر محمول أو هاتفًا ذكيًا أو جهازًا لوحيًا فإن الموقع يقوم تلقائيا بتعديل حجم الواجهة والصفحات حسب المقاسات الجديدة للعرض، ويتم تكويد هذا التصميم بإستخدام إتش تي إم إل 5 وسي إس إس 3.

طريقة عمل التصميمات المتجاوبة[عدل]

تجاوب المقالات[عدل]

تتم العملية عند قراءة المتصفح للجهاز الذي قام بفتح الموقع،فأول شيء سيقوم بالتعرف عليه هو عرض الصفحة، ،ولذلك فهناك ثلاثة أجهزة أساسية يراعي دائما المطورين العمل عليها في التصميم المتجاوب وهما شاشات الهواتف، أجهزة الكمبيوتر المكتبية والأجهزة الوحية، ومن أجل استيعاب هذه الشاشات المختلفة سيكون هناك أربعة أحجام لعرض الشاشة وهما 320 بيكسل و600 بيكسل و768 بيكسل ثم 1280 بيكسل وهناك عرض 1824 ولكنه لا يُستخدم بكثرة كونه يُستخدم في الشاشات التي يتجاوز حجمها مستوى أجهزة الكمبيوتر المكتبية.

تجاوب الصور[عدل]

عند وضع صورة متجاوبة فإنه ُكتب كود الصورة كما يلي:

(body
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-color: #000;
background-size:contain;

وذلك يعني أنه عندما تظهر الصورة مثلا في حجم أجهزة الكمبيوتر المكتبية فإن الصورة ستتكيف مع حجم المتصفح تلقائيا.

فائدة انشاء موقع متجاوب[عدل]

التصميم المتجاوب للموقع يعطي المستخدم انطباع جيد , وبالتأكيد انطباع المستخدم سيساعدك في بيع منتجاتك أو تقديم خدماتك بشكل أفضل.

كذلك فان أغلب محركات البحث أصبحت تعطي الاولوية للمواقع ذات تصميم متوافق مع الجوال الأولوية عند البحث عن طريق الجوال.

انظر ايضا[عدل]

مراجع[عدل]


Icon-gears.png
هذه بذرة مقالة عن موضوع تقاني بحاجة للتوسيع. شارك في تحريرها.