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

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

معاينة عروض شاشات أخرى

انقر على قائمة العرض (أيقونة الجهاز على يمين شريط المسار) واختر عرضًا. يتغير حجم مساحة التصميم لترى كيف تبدو الصفحة على تلك الشاشة.

الخيار	العرض
هاتف صغير	320px
هاتف محمول	375px
هاتف كبير	425px
جهاز لوحي	768px
كمبيوتر	العرض الكامل

يمكنك أيضًا الضغط على D للكمبيوتر، أو T للجهاز اللوحي (768px)، أو M للهاتف المحمول (375px)، ما دمت لا تكتب نصًا.

لا يؤدي تغيير العرض إلى تغيير أي تنسيقات. بل يغيّر حجم مساحة التصميم فقط.

التنسيق حسب حجم الشاشة

يمكن أن يتضمن التنسيق بادئة لحجم الشاشة، بحيث يُطبّق بدءًا من ذلك العرض وما فوقه فقط.

البادئة	تُطبّق عند
sm:	640px وما فوق
md:	768px وما فوق
lg:	1024px وما فوق
xl:	1280px وما فوق

مثلًا، يجعل text-2xl md:text-4xl نص العنوان أصغر على الهواتف وأكبر على الأجهزة اللوحية وما فوقها.

لإضافة تنسيق كهذا، حدد العنصر وافتح قسم متقدم في لوحة التحرير. اكتب الفئة في حقل اكتب فئة واضغط على Enter واضغط على Enter. ثم بدّل بين العروض للتحقق من النتيجة.

يمكنك أيضًا طلب ذلك بكلماتك. حدد العنصر، واضغط على ⌘K / Ctrl+K، واكتب شيئًا مثل «أخفِه على الهاتف» أو «رتّب العناصر عموديًا على الهاتف». راجع التحرير بالذكاء الاصطناعي.

إخفاء العناصر على بعض الشاشات

أضف hidden لإخفاء عنصر على جميع الشاشات، ثم أضف فئة تحدد عرض الشاشة الذي يبدأ عنده ظهوره:

• تخفيه hidden md:block على الهواتف وتُظهره على الأجهزة اللوحية وما فوقها.
• تُظهره md:hidden على الهواتف وتخفيه على الأجهزة اللوحية وما فوقها.