HTML وCSS / واجهات متكيفة / الدرس 9
التخطيط المتجاوب وشروط الوسائط
كيف التخطيط مع المحتوى والمساحة مع حفظ التكبير والاتجاه ومرونة الإدخال.
في هذه الصفحة
أهداف الدرس
- التجاوب سلوك
- تغيير علاقة عند حد محتوى
- اختبار الانتقالات لا الطرفين فقط
التجاوب سلوك
يحفظ التصميم المتجاوب العلاقات عند تغير المساحة والمحتوى والتفضيلات. ليس صورة مكتبية مصغرة أو عروضا ثابتة لأسماء هواتف. ابدأ بتدفق ضيق صالح وأضف أعمدة حين يسمح المحتوى. قد تضيق نافذة المكتب ويدور الهاتف ويغير التكبير مساحة بكسلات CSS، وتكشف اللغة فشلا عند العرض نفسه. حدد القراءة والوصول والترتيب قبل العتبات.
القيود المرنة قبل العتبات
تحل النسب والوحدات النسبية والحدود والمسارات المرنة مشكلات باستمرار. تغير العتبة علاقة حين لا يعود الشريط الجانبي صالحا بجوار النص مثلا. لا تعطل التكبير لإخفاء التجاوز. توفر viewport سياقا لا بديلا عن المرونة. استخدم القياسات المنطقية لتقليل إعادة كتابة الجوانب في RTL. اختبر حاجة المهمة لا افتراض تكافؤ كل الشاشات فوق رقم مألوف.
تغيير علاقة عند حد محتوى
يضع المثال aside بعد المقال في المصدر، وتضيف الوسائط عمودين عند عرض يناسب العينة. يبقى المحتوى مقروءا دون الشرط. إنه تحسين ترتيب لا نسختان مخفيتان، فقد تتباعد نسختا الهاتف والمكتب وتكرران المعرفات والتركيز. فضل بنية واحدة إلا لمطلب حقيقي، وافحص توافق الترتيب البصري مع القراءة والمفاتيح.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Content breakpoint</title>
<style>
.layout { display: grid; gap: 1rem; } @media (min-width: 45rem) { .layout { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
</style>
</head>
<body>
<main><h1>Workshop guide</h1><div class="layout"><article><h2>Preparation</h2><p>Read the notes before joining the session.</p></article><aside><h2>Materials</h2><p>A text editor is sufficient.</p></aside></div></main>
</body>
</html>
One column when narrow; two proportional columns when wide.الافتراضي عمود واحد ويضيف الشرط عمودا ثانويا دون تكرار المحتوى. النتيجة المتوقعة: عمود عند الضيق وعمودان نسبيان عند الاتساع.
احترام القدرات والتفضيلات
تعبر الوسائط عن التفضيلات والقدرات أيضا. تساعد prefers-reduced-motion على تقليل الحركة، وتفيد hover وpointer التحسينات الإضافية. قد يملك الجهاز عدة مداخل؛ فلا تساو الضيق باللمس والاتساع بالفأرة. يضيف المثال زخرفة للتحويم حين يتاح ويحفظ التركيز مستقلا. يبقى الرابط صالحا أساسا. ولا تصلح تعليمة ضرورية محصورة بتحويم حتى لو صح شرطها.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Capability enhancement</title>
<style>
a { text-decoration: underline; } a:focus-visible { outline: 3px solid #174e9a; outline-offset: 3px; } @media (hover: hover) { a:hover { text-decoration-thickness: .2em; } }
</style>
</head>
<body>
<main><h1>Interaction states</h1><a href="#notes">Read the notes</a><section id="notes"><h2>Notes</h2><p>Focus remains visible without hover.</p></section></main>
</body>
</html>
A usable link with separate hover and focus treatments.يضيف التحويم زخرفة فقط، وللمفاتيح تركيز مستقل ولا يختفي الرابط بافتراض قدرة. النتيجة المتوقعة: رابط صالح بمعالجتي تحويم وتركيز منفصلتين.
اختبار الانتقالات لا الطرفين فقط
غير العرض حول كل عتبة لا عند هاتف ومكتب فقط. اختبر العناوين الطويلة والترجمات والتكبير والدوران ولوحة الشاشة عند الصلة. حدد أول صندوق زائد بدلا من قص المستند. قد يغطي عنصر ثابت التركيز في شاشة قصيرة، فافحص الارتفاع أيضا. سجل الإعدادات والعلاقة الفاشلة؛ تقدم مصفوفة حالات مفيدة دليلا أقوى من صور كثيرة بالمحتوى القصير نفسه.
الأخطاء الشائعة وإصلاحها
تبدو صفحة الهاتف لوحة مكتبية مصغرة
- لماذا يحدث؟
- تفرض الحدود الثابتة الصفحة.
- كيف تصلحه؟
- استخدم مرونة وتغييرات يقودها المحتوى.
- كيف تتجنب تكراره؟
- اختبر الأساس الضيق قبل الأعمدة.
لا يكتشف مستخدم المفاتيح تعليمة التحويم
- لماذا يحدث؟
- افترض التصميم مدخلا واحدا.
- كيف تصلحه؟
- أبق التعليمات الضرورية متاحة.
- كيف تتجنب تكراره؟
- اختبر المفاتيح واللمس منفصلين.
تنشئ نسختان معرفات مكررة
- لماذا يحدث؟
- تكرر الشجرتان عناصر التحكم.
- كيف تصلحه؟
- فضل بنية واحدة قابلة للتكيف.
- كيف تتجنب تكراره؟
- افحص المخفي والظاهر.
اختبر فهمك
1. اختر عتبة لشريط جانبي دون اسم جهاز.
اعرض الحل المشروح
ابدأ بعمود ووسع حتى يتسع المقال المقروء والشريط والفاصل. ضع العتبة قرب حاجة المحتوى واختبر الجوار والترجمة والتكبير، لا رقما واحدا.
2. لماذا تنجح واجهة واسعة وتفشل عند تكبير 200%؟
اعرض الحل المشروح
يقلل التكبير المساحة الفعلية ويكبر المحتوى فيكشف عرضا ثابتا أو قصا أو تغطية. أعد المهمة وحدد الصندوق وأصلح قيده بدلا من تقييد التكبير.
أهم ما تعلمته
- يتبع التجاوب المحتوى والمساحة.
- ليست قدرات الإدخال أسماء عرض جهاز.
- اختبر العروض حول كل انتقال.