اختبار نقاط توقف استعلامات الوسائط

خطوات الاستخدام

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

أدخل قيمة نقطة التوقف (breakpoint) التي تستخدمها في استعلام الوسائط (media query). نقاط التوقف هي عتبات عرض شاشة محددة (مثل 768 بكسل للأجهزة اللوحية). يتم تعريفها في CSS باستخدام `@media (min-width: ...)` أو `@media (max-width: ...)`. على سبيل المثال، نقطة التوقف الشائعة للأجهزة اللوحية هي 768 بكسل.

اضغط على زر 'اختبار' (أو انتظر التحديث التلقائي) للحصول على النتيجة. ستقوم الأداة بمقارنة عرض الشاشة المدخل مع نقطة التوقف وتحديد ما إذا كان العرض يتجاوزها (أي يكون أكبر من أو يساوي نقطة التوقف في حالة `min-width`، أو أصغر من أو يساوي في حالة `max-width`).

الأسئلة الشائعة

استعلامات الوسائط (Media Queries) هي تقنية في CSS تسمح بتطبيق أنماط مختلفة بناءً على خصائص الجهاز أو المتصفح، مثل عرض الشاشة، الارتفاع، الدقة، أو التوجيه (أفقي/عمودي). يتم تعريفها باستخدام قاعدة `@media` متبوعة بشرط (أو عدة شروط). على سبيل المثال: `@media (min-width: 768px) { ... }` تطبق الأنماط فقط عندما يكون عرض الشاشة 768 بكسل أو أكثر. تعتبر هذه التقنية أساسية لتصميم الواجهات المتجاوبة (responsive design)، حيث تتيح تكييف التخطيط ليناسب جميع أحجام الشاشات من الهواتف الصغيرة إلى الشاشات الكبيرة. الفكرة هي تحديد نقاط توقف (breakpoints) تمثل عتبات يتغير عندها التصميم لضمان أفضل تجربة مستخدم. أشهر نقاط التوقف الشائعة: 480px للهواتف، 768px للأجهزة اللوحية، 1024px لأجهزة الكمبيوتر المحمولة، و1200px للشاشات الكبيرة. لكن يمكن تخصيصها حسب احتياجات التصميم. عند استخدام `min-width`، يتم تطبيق القواعد عندما يكون العرض أكبر من أو يساوي القيمة. بينما `max-width` تطبق عندما يكون العرض أصغر من أو يساوي القيمة. يمكن أيضًا الجمع بين شروط باستخدام `and`، `not`، أو `only`. على سبيل المثال: `@media (min-width: 768px) and (max-width: 1024px) { ... }` يستهدف الأجهزة اللوحية. هذه الأداة تساعدك على اختبار ما إذا كان عرض معين ينطبق عليه شرط معين أم لا، مما يسهل تصحيح الأخطاء في التصميم.

الفرق الأساسي بين `min-width` و `max-width` هو الاتجاه: `min-width` يعني 'عندما يكون عرض الشاشة على الأقل هذه القيمة' (أي أكبر من أو يساوي)، بينما `max-width` يعني 'عندما يكون عرض الشاشة على الأكثر هذه القيمة' (أي أصغر من أو يساوي). اختيار أيهما يعتمد على فلسفة التصميم. عادةً ما يستخدم مصممو الواجهات المتجاوبة نهج 'الجوال أولاً' (mobile-first)، حيث يبدأون بتصميم للشاشات الصغيرة ثم يضيفون تحسينات للشاشات الأكبر باستخدام `min-width`. على سبيل المثال: القاعدة الافتراضية للجوال، ثم `@media (min-width: 768px) { ... }` للتابلت، ثم `@media (min-width: 1024px) { ... }` للابتوب. هذا يضمن أن الأنماط تُبنى بشكل تراكمي. بينما نهج 'سطح المكتب أولاً' (desktop-first) يستخدم `max-width` لتقليل التخطيط مع صغر الشاشة. مثال: التصميم الافتراضي لسطح المكتب، ثم `@media (max-width: 1024px) { ... }` للابتوب، ثم `@media (max-width: 768px) { ... }` للتابلت. كلا النهجين صحيحان، لكن الجوال أولاً أصبح أكثر شيوعًا نظرًا لانتشار الهواتف. يجب أيضًا مراعاة ترتيب القواعد في CSS: إذا كان هناك تعارض، تسود القاعدة الأكثر تحديدًا أو القاعدة التي تأتي لاحقًا. الأداة هنا تساعدك على فهم أي عرض ينتمي لأي نطاق.

اختيار نقاط التوقف المثالية يعتمد على المحتوى والجهاز المستهدف. لا توجد نقاط توقف مطلقة، ولكن هناك ممارسات شائعة: 1) استخدم نقاط التوقف لأحجام الشاشات الفعلية للأجهزة (مثل 320px للجوال القديم، 375px لأيفون، 414px لأندرويد كبير، 768px لآيباد، 1024px لآيباد برو، 1280px لابتوب، 1920px لشاشة مكتبية). 2) بدلاً من الاعتماد على أجهزة معينة، ضع نقاط التوقف عند الأماكن التي ينكسر فيها التصميم (content breakpoints). على سبيل المثال، إذا أصبح النص صغيرًا جدًا أو تداخلت العناصر، أضف نقطة توقف. 3) ابدأ بثلاث نقاط أساسية: للجوال (max-width: 480px)، للتابلت (min-width: 481px and max-width: 768px)، وسطح المكتب (min-width: 769px). ثم عدّل حسب حاجتك. 4) استخدم أدوات مثل Google Chrome DevTools لمحاكاة أحجام الشاشات واختبار التصميم. 5) تذكر أن CSS يمكن أن يحتوي على نقاط توقف متعددة لتناسب مختلف النطاقات. الأداة هنا تسمح لك باختبار أي عرض مع أي نقطة توقف لترى ما إذا كان التصميم سيتغير أم لا، مما يساعدك على التحقق من صحة اختيارك.

نعم، كثافة البكسل (DPI/PPI) يمكن أن تؤثر، ولكن افتراضيًا، استعلامات الوسائط مثل `min-width` و `max-width` تستخدم بكسل CSS (CSS pixels)، وليس البكسلات المادية. بكسل CSS هو وحدة مجردة تتكيف مع كثافة الشاشة. على جهاز Retina، بكسل CSS واحد قد يمثل 2 أو 3 بكسلات مادية. لذلك، عرض الشاشة الفعلي بالبكسلات المادية قد يكون ضعف عرض CSS. على سبيل المثال، هاتف iPhone XS له دقة 1125×2436 بكسل مادي، لكن عرض CSS هو 375 بكسل (في الوضع العمودي). لذلك، استعلامات `min-width: 768px` لن تعمل عليه لأنه عرضه 375 بكسل فقط. للتعامل مع الشاشات عالية الدقة، يمكنك استخدام استعلامات خاصة مثل `@media (-webkit-min-device-pixel-ratio: 2) { ... }` (لأجهزة Apple) أو `@media (min-resolution: 192dpi) { ... }` (معيار W3C) لتوفير صور بدقة أعلى أو تعديل أنماط أخرى. لكن بالنسبة لتخطيط الصفحة، لا يزال عرض CSS هو المعيار. الأداة هنا تتعامل مع عرض CSS الذي تدخله، وليس البكسلات المادية. لذا، إذا كنت تريد اختبار جهاز Retina، أدخل عرض CSS (مثل 375 بكسل) وليس الدقة المادية. هذا يضمن دقة النتائج.

اختبار نقاط توقف استعلامات الوسائط

أدخل القيم

خطوات الاستخدام

أمثلة محلولة

أمثلة محسوبة

الأسئلة الشائعة

أدخل القيم

خطوات الاستخدام

حاسبات ذات صلة

أمثلة محسوبة

الأسئلة الشائعة