مقدمة في التصميم المتجاوب - مساعدة Webflow
تعلم كيف يساعد إعادة تدفق المحتوى، الأحجام الثابتة، الأحجام النسبية، ونقاط التوقف (استعلامات الوسائط) في إنشاء تصميمات متجاوبة.
عند زيارة موقع على جهازك المحمول، قد ترى نسخة سطح المكتب مضغوطة في شاشة أصغر، مما يجبرك على التكبير والتحريك لرؤية أي محتوى. قد تصل أيضًا إلى نسخة محمولة مخففة تفتقر إلى المحتوى والتجربة التي تجعل نسخة سطح المكتب متفوقة. نأمل أن ترى موقعًا متجاوبًا - تصميم يعيد تدفق وإعادة وضع المحتوى بناءً على عرض المتصفح.
هناك ثلاثة جوانب مختلفة للتصميم المتجاوب سنغطيها هنا:
- إعادة تدفق المحتوى
- الأحجام الثابتة
- الأحجام النسبية
- نقاط التوقف (استعلامات الوسائط)
إعادة تدفق المحتوى
يشير إعادة تدفق المحتوى إلى المحتوى الذي يضبط عرضه بناءً على عرض نافذة المتصفح. على سبيل المثال، الفقرة ذات الإعدادات الافتراضية ستلتف تلقائيًا مع تصغير عرض المتصفح. يمكن محاكاة هذا السلوك عن طريق سحب حافة لوحة المصمم.
الأحجام الثابتة
الأحجام النسبية
يشير هذا إلى ضبط حجم العنصر بالنسبة لأشياء أخرى مثل عرض المتصفح أو عنصر الوالد. على سبيل المثال، بدلاً من استخدام حجم يعتمد على البكسل للصورة، فكر في استخدام وحدات مختلفة مثل %، VW (عرض نافذة العرض)، أو VH (ارتفاع نافذة العرض). إذا استخدمت % على صورة وضبطت عرض المتصفح، يمكنك أن ترى أنها ستتكيف وفقًا لذلك بينما الصورة المعتمدة على البكسل لن تتكيف.
نقاط التوقف
عادةً ما تكون التخطيطات أكثر تعقيدًا من مجرد إدارة عرض صورة واحدة. استخدام نقاط التوقف (المعروفة أيضًا بالاستعلامات الإعلامية) يتيح لك ليس فقط اختبار إعادة تدفق المحتوى، ولكن أيضًا تعديل التصميم والتخطيط بناءً على نطاقات عرض الأجهزة المختلفة.
تعرف على المزيد: