درس حول التصميم المتجاوب Responsive Design

في هذا الدرس سأشرح شرحاً مبسطا لما يعرف بتصميم المتجاوب في Web design مع أمثلة بسيطة لفهمه، نبدء على بركة الله

ما هو تصميم المتجاوب؟


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

على سبيل مثال لو زرت موقع متجاوب ستلاحظ أن شكلة و تخطيطه مناسب لحجم الشاشة الجهاز، و ستلاحظ إختلاف شكله لو زرت نفس الموقع على حاسب مكتبي،

كيف يتم عمل تصميم المتجاوب؟
يتم عمل تصميم المتجاوب عبرخاصية CSS media queries و هي أحد خصائص CSS3، حيث تحدد قياس الشاشة الجهاز مراد عمل تنصيق له ثم تضيف أكواد CSS بشكل تالي،


مثال؛

رمز Code:

body {
    background-color: #FD004A;
}

@media all and (max-width:400px) {
    body {
        background-color: #00ccff;
    }
}

هذا مثال بسيط لتغير لون صفحة عندما يكون قياس الشاشة 400 بكسل عرضاً،
ملاحظة: لتعمل خاصية تجاوب على أجهزة محمولة كهواتف يجب أن تضيف كود meta viewport في ما بين وسم head،

رمز Code:

<meta name="viewport" content="width=device-width, initial-scale=1">

و لاحظتم فخاصية @media أشبه بجمل شرطية If conditions في البرمجة طبعا لمن عنده خلفية برمجية و الشرط الذي يتم تحقق منه هنا هو قياس الشاشة، حيث تقول لالمتصفح إدا كان قياس شاشة الجهاز المستخدم كدا … طبق هذا التنصيق،

شكرا لمتابعة ولو أفادكم هذا الدرس لا تنسوا مشاركته ليستفيد غيركم، تحياتي