استعلامات وسائط CSS والتصميم سريع الاستجابة

كيفية العمل مع استعلامات الوسائط في CSS لبناء صفحات ويب سريعة الاستجابة

في هذا المنشور ، سأقدم أولاً أنواع الوسائط وأوصاف ميزات الوسائط ، ثم سأشرح استفسارات الوسائط.

أنواع الوسائط

تُستخدم أنواع الوسائط المستخدمة في استعلامات الوسائط وإعلاناتimport لتحديد الوسائط التي يتم تحميل ملف CSS أو جزء من CSS عليها.

لدينا ما يليأنواع الوسائط

  • allيعني كل وسائل الإعلام
  • printتستخدم عند الطباعة
  • screenتستخدم عند عرض الصفحة على الشاشة
  • speechتستخدم لقارئات الشاشة

screenهو الافتراضي.

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

يمكننا استخدامها في جملimport مثل هذا:

@import url(myfile.css) screen;
@import url(myfile-print.css) print;

يمكننا تحميل ملف CSS على أنواع وسائط متعددة تفصل بينها بفاصلة:

@import url(myfile.css) screen, print;

نفس الأعمال لlinkعلامة في HTML:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen" />
<link rel="stylesheet" type="text/css" href="another.css" media="screen, print" />

لا نقتصر على استخدام أنواع الوسائط فقط في ملفmediaالسمة وفي@importتصريح. هناك المزيد

واصفات ميزات الوسائط

أولاً ، دعنا نقدمواصفات ميزات الوسائط. إنها كلمات رئيسية إضافية يمكننا إضافتها إلى ملفmediaسمة من سماتlinkأو إلى@importإعلان ، للتعبير عن المزيد من الشروط الشرطية على تحميل CSS.

فيما يلي قائمة بهم:

  • width
  • height
  • device-width
  • device-height
  • aspect-ratio
  • device-aspect-ratio
  • color
  • color-index
  • monochrome
  • resolution
  • orientation
  • scan
  • grid

كل واحد منهم لديه المقابلة min- * و max- * ، على سبيل المثال:

  • min-widthوmax-width
  • min-device-widthوmax-device-width

وهكذا.

يقبل بعض هؤلاء قيمة الطول التي يمكن التعبير عنها بـpxأوremأو أي قيمة طول. إنها حالةwidthوheightوdevice-widthوdevice-height.

على سبيل المثال:

@import url(myfile.css) screen and (max-width: 800px);

لاحظ أننا نلتف كل كتلة باستخدام واصفات ميزات الوسائط بين قوسين.

يقبل البعض قيمة ثابتة.orientation، تستخدم للكشف عن اتجاه الجهاز ، يقبلportraitأوlandscape.

مثال:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (orientation: portrait)" />

scan، تستخدم لتحديد نوع الشاشة ، يقبلprogressive(لشاشات العرض الحديثة) أوinterlace(لأجهزة CRT الأقدم)

البعض الآخر يريد عددًا صحيحًا.

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

aspect-ratioوdevice-aspect-ratioقبول قيمة النسبة التي تمثل نسبة منفذ العرض إلى الارتفاع ، والتي يتم التعبير عنها في صورة كسر.

مثال:

@import url(myfile.css) screen and (aspect-ratio: 4/3);

resolutionيمثل كثافة البكسل للجهاز ، معبراً عنها بـنوع بيانات الدقةمثلdpi.

مثال:

@import url(myfile.css) screen and (min-resolution: 100dpi);

عوامل المنطق

يمكننا الجمع بين القواعد باستخدامand:

<link rel="stylesheet" type="text/css" href="myfile.css" media="screen and (max-width: 800px)" />

يمكننا تنفيذ نوع "أو" من العمليات المنطقية باستخدام الفواصل ، والتي تجمع بين استعلامات وسائط متعددة:

@import url(myfile.css) screen, print;

يمكننا ان نستخدمnotلنفي استعلام وسائط:

@import url(myfile.css) not screen;

الأهمية:notيمكن استخدامه فقط لنفي استعلام وسائط بالكامل ، لذلك يجب وضعه في بدايته (أو بعد فاصلة)

تساؤلات الإعلام

كل تلك القواعد المذكورة أعلاه التي رأيناها تنطبق على استيراد أو علىlinkيمكن تطبيق علامة HTML داخل CSS أيضًا.

تحتاج إلى لفهم في ملف@media () {}بنية.

مثال:

@media screen and (max-width: 800px) {
  /* enter some CSS */
}

وهذا هو الأساس لالرسم المتجاوب.

يمكن أن تكون الاستعلامات عن الوسائط معقدة للغاية. ينطبق هذا المثال على CSS فقط إذا كان جهازًا بشاشة ، وكان العرض بين 600 و 800 بكسل ، وكان الاتجاه أفقيًا:

@media screen and (max-width: 800px) and (min-width: 600px) and (orientation: landscape) {
  /* enter some CSS */
}

تحميل مجانيكتيب CSS


المزيد من دروس css: