بناء تخطيطات مستجابة بدون استعلامات media query

كتب بواسطة idriss douiri profile picture إدريس الدويري

2 min read

#css #tips
مواقع استجابة بدون استعلامات وسائط
مشاركة

تعد استعلامات الوسائط أساسية لبناء مواقع ويب استجابة، ولكن في بعض الأحيان، يمكننا تحقيق نفس النتيجة بدونها.

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

الطباعة السلسة

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

clamp([min value], [preferred value], [max value])
h1 {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
}

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

Fluid typography chart demonstrating responsive font size adjustments based on viewport width

للمزيد من التفاصيل حول كيفية عمل ذلك، اقرأ هذا المقال.

الشبكات المستجابة

يمكنك جعل حاوية الشبكة تقرر عدد الأعمدة التي يجب أن تحتوي عليها تلقائيًا استنادًا إلى المساحة المتاحة وعرض العناصر التابعة لها باستخدام كلمات auto-fit و auto-fill داخل دالة repeat().

.grid-contianer {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
}

يمكنك استخدام auto-fill أو auto-fit. كلاهما مشابه، والاختلاف الوحيد هو أن auto-fill سيملأ المساحة بجميع الأعمدة، بينما auto-fit سيمدد العناصر لتناسب الأعمدة. إليك شرح مرئي لرؤية الفرق بين هذه الكلمات المفتاحية:

اقرأ هذا المقال لمزيد من الشرح المتعمق.

مرونة flex

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

.tags {
  display: flex;
  flex-wrap: wrap;
}

عرض مستجاب

إن وجود عرض ثابت لحاويتك على كل نقطة انقطاع حجم الشاشة ليس أمرًا ضروريًا. بدلاً من ذلك، يمكنك استخدام خاصية max-width أو دالة min() كقيمة للعرض.

.container {
  max-width: 900px;
  /* width: min(100%, 900px); */
}

الصور المستجابة

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

img {
  max-width: 100%;
}