CSS - RWD Intro التصميم المتجاوب
CSS - التصميم المتجاوب (Responsive Web Design)
🔸 التصميم المتجاوب (Responsive Design) هو أسلوب في تصميم صفحات الويب يجعلها تتكيف تلقائيًا مع حجم شاشة الجهاز المستخدم، سواء كان كمبيوتر، تابلت، أو هاتف.
💡 لماذا التصميم المتجاوب مهم؟
- لأن المستخدمين يتصفحون المواقع من أجهزة بأحجام مختلفة.
- لتحسين تجربة الاستخدام على الهواتف الذكية.
- لتحسين ترتيب الموقع في نتائج البحث (SEO).
📱 مبدأ التصميم المتجاوب
يتم استخدام **الـ CSS Media Queries** لتطبيق أنماط مختلفة حسب عرض الشاشة. بالإضافة إلى ذلك، يُفضل استخدام:
- وحدات مرنة مثل
%وvwوem. - صور مرنة باستخدام
max-width: 100%;. - تقسيم الصفحات باستخدام أنظمة الشبكة (Grid / Flexbox).
🧪 مثال: استخدام وحدة % بدلاً من px
.container {
width: 100%;
}
📌 هذا يضمن أن العنصر سيتمدد أو يتقلص حسب عرض الشاشة.
🧪 مثال: صورة متجاوبة
img {
max-width: 100%;
height: auto;
}
📌 هذا يمنع الصورة من الخروج عن إطار العنصر الحاوي، وتظل متناسبة في الحجم.
🧪 مثال: استخدام media queries لتغيير لون الخلفية حسب حجم الشاشة
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
📌 نصائح مهمة
- استخدم
viewportفي<meta>داخل<head>للتحكم في المقياس على الجوال:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- ابدأ التصميم من الشاشات الصغيرة ثم أضف Media Queries للشاشات الأكبر (Mobile First).
- اختبر موقعك على أكثر من جهاز أو استخدم أدوات مثل أدوات المطور في المتصفح (DevTools).
تعليقات
إرسال تعليق