3.3 KiB
| title | localeTitle |
|---|---|
| Responsive Web Design | تصميم الويب سريع الاستجابة |
تصميم الويب سريع الاستجابة
تصميم الويب السريع الاستجابة هو مفهوم تصميم صفحات الويب التي تتكيف مع أحجام الشاشة المختلفة. عادة ما يتضمن استخدام تخطيطات مختلفة وأحجام الخطوط وموضع قوائم التنقل.
لإنشاء صفحة ويب متجاوبة ، يستخدم CSS عادةً في تصميم عناصر HTML الخاصة بك. بعض الطرق الشائعة في CSS المستخدمة لإنشاء تصميمات ويب متجاوبة هي:
- كتابة استعلامات الوسائط
- استخدام أطر CSS الموجودة مسبقًا
- باستخدام نموذج Flexbox
- باستخدام CSS الشبكة
1. استعلامات الوسائط
تخبر استعلامات الوسائط متصفح الويب بتجاهل أو استبدال خصائص صفحة الويب استنادًا إلى سمات معينة مثل عرض الشاشة أو ما إذا كان المستخدم يطبع.
@media (query) { /* The browser will use the CSS rules within the curly braces when the query is true */ }
يقوم المثال التالي بتعيين padding-left و padding-right داخل الطبقة الداخلية more-padding عندما يكون عرض الشاشة أقل من أو يساوي 768 بكسل.
@media screen and (max-width: 768px) { .more-padding { padding-left: 10px; padding-right: 10px; } }
2. أطر CSS
تشتمل أطر CSS مثل Bootstrap و Material Design Lite و Foundation على طبقات CSS مضمنة مسبقًا تجعل ترميز التصميم سريع الاستجابة أكثر بساطة. تعمل هذه الفئات مثل فئات HTML القياسية.
في هذا المثال ، يحدد col-md-9 و col-sm-6 عرض علامة <div> استنادًا إلى ما إذا كانت الشاشة صغيرة أم متوسطة.
`
`يقسم إطار Bootstrap الصف إلى اثني عشر عمودًا. في المثال أعلاه ، سوف ينتشر <div> عبر تسعة أو ستة منهم. يعد نظام الشبكة ، الموضح أدناه ، أمرًا أساسيًا في كيفية تسهيل Bootstrap للتصميم سريع الاستجابة.
