كيفية استخدام نقاط توقف CSS لإنشاء تصميمات سريعة الاستجابة

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

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

هيا بنا نبدأ!

ما هي نقطة توقف CSS؟

نقاط توقف CSS هي نقاط يستجيب فيها محتوى موقع الويب وفقًا لعرض الجهاز ، مما يسمح لك بإظهار أفضل تخطيط ممكن للمستخدم.

تسمى نقاط توقف CSS أيضًا بنقاط توقف استعلام الوسائط ، حيث يتم استخدامها مع الاستعلام عن الوسائط.

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

كيفية تعيين نقاط توقف CSS

الجزء الصعب هو تحديد نقاط التوقف بأنفسهم. لا توجد أي قوالب قياسية ، وتستخدم الأطر المختلفة نقاط توقف مختلفة.

إذن ما هو النهج الذي يجب أن تتبعه لنقاط التوقف الخاصة بك؟

هناك طريقتان محتملتان لاتباعهما:

• نقاط التوقف على أساس الجهاز
• نقاط التوقف على أساس المحتوى

نقاط توقف CSS على أساس الجهاز

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

ومع ذلك ، لا يزال خيارًا قابلاً للتطبيق ، حيث قد تجد أنه مناسب لك. فيما يلي مثال لنقاط التوقف الخاصة بالجهاز:

 [css]/* ----------- iPhone 6, 6S, 7 and 8 ----------- */ /* Portrait */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { } /* Landscape */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) { } /* ----------- Google Pixel ----------- */ /* Portrait */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) { } /* Landscape */ @media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) { }[/css]

مع هذا النهج ، سينتهي بك الأمر إلى الحصول على قائمة ضخمة من استعلامات الوسائط.

نقاط توقف CSS على أساس المحتوى

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

تعني نقطة التوقف هذه أنه سيتم تطبيق CSS عندما يكون عرض الجهاز 768 بكسل وما فوق.

 [css]@media only screen (min-width: 768px){ ... }[/css]

يمكنك أيضًا تعيين نطاق بنقاط توقف ، لذلك سيتم تطبيق CSS فقط ضمن تلك الحدود.

 [css]@media only screen and (min-width: 768px) and (max-width: 959px){ ... }[/css]

متى يجب استخدام نقاط توقف CSS الأدنى أو القصوى للعرض

يمكنك ضبط نقاط التوقف الخاصة بك بطرق مختلفة باستخدام min-width ، max-width ، أو حتى من خلال الجمع بين كليهما. لكن السؤال ، متى يجب أن تستخدم كل واحدة؟

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

عيّن الأنماط الافتراضية للجهاز الصغير واضبط الأجهزة الأكبر حجمًا وفقًا لذلك.

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

استخدام نقاط توقف CSS مع SASS

إذا كنت تستخدم معالجًا أوليًا مثل SASS أو SCSS ، فيمكنك كتابة نقاط توقف أكثر ذكاءً. يتيح لك Mixin إنشاء المزيد من نقاط التوقف التعريفي لتتذكرها ، مثل هذا:

 [css]@mixin tablet-up { @media only screen (min-width: 768px) { @content; } }[/css]

أثناء العمل في مجموعة ، يكون تذكر "الجهاز اللوحي" أسهل بكثير من تذكر 768 بكسل أو 48 ميكرومتر. يمكن لأي شخص فهم نقطة التوقف هذه ؛ هو الحال بالنسبة للكمبيوتر اللوحي وأحجام الشاشة أعلاه.

أي نقاط توقف CSS يجب استخدامها

لقد رأينا كيفية استخدام نقاط التوقف ومتى نستخدمها ، ولكن يبقى السؤال: ما هي نقاط التوقف المحددة التي يجب عليك استخدامها؟

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

يحتوي Bootstrap على نقاط توقف عند 576 بكسل و 768 بكسل و 992 بكسل و 1200 بكسل. تحتوي المؤسسة بشكل أساسي على نقاط توقف عند 40em و 64em. في Bulma ، يتم تعيين نقاط التوقف عند 768 بكسل و 769 بكسل و 1024 بكسل و 1216 بكسل و 1408 بكسل.

لكل منها نقاط توقف مختلفة ، لكن هناك شيء واحد مشترك بينهما وهو نهج الجوّال أولاً. يمكنك استخدام إحدى نقاط التوقف هذه كنقطة بداية أو يمكنك الخروج بنقطة توقف خاصة بك ، مثل هذا:

 [css]@media (min-width: 640px){ ... } @media (min-width: 768px){ ... } @media (min-width: 1024px){ ... } @media (min-width: 1200px){ ... }[/css]

انت وجدت الفكرة!

تغليف

باختصار ، تعد نقاط توقف CSS طريقة رائعة لإعادة هيكلة التخطيط الخاص بك لتوفير أفضل تجربة للمستخدم عبر الأجهزة المختلفة.

حاول دائمًا إنشاء نقاط توقف بناءً على المحتوى الخاص بك ، وليس على الأجهزة. قسّمهم إلى عرض منطقي بدلاً من عرض عشوائي واحتفظ بهم على رقم يمكن التحكم فيه ، لذلك يظل التعديل بسيطًا وواضحًا.

ما هي نقاط توقف CSS التي تستخدمها لتخطيطاتك؟ لا تخبرنا في قسم التعليقات أدناه.

ماذا بعد؟

قم بإنشاء واختبار كتل Gutenberg المخصصة الخاصة بك باستخدام Local مجانًا!

تعرف على المزيد حول Local هنا!

لمزيد من النصائح حول إنشاء مواقع سريعة الاستجابة ، تحقق من هذه المقالات!

• كيف تجعل موقع WordPress الخاص بك مناسبًا للجوّال
• كيفية إنشاء قائمة تنقل سريعة الاستجابة في WordPress
• 7 نصائح لأفضل الممارسات لتصميم الويب سريع الاستجابة