❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSإستعلامات الوسائط

  • ما هي إستعلامات الوسائط
  • قواعد إستعلامات الوسائط
  • أنواع إستعلامات الوسائط
  • شروط إستعلامات الوسائط

ما هي إستعلامات الوسائط

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

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

إستعلامات الوسائط مهمة جداً عند بناء تصاميم متجاوبة ( Responsive ) تظهر بشكل ممتاز على جميع الأجهزة و لا غنى عنها لذلك.

قواعد إستعلامات الوسائط

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

@media not|only mediatypes and (expressions) {
    CSS-Code
}
  • @media يجب وضعها في البداية للبدء باستخدام إستعلامات الوسائط.
  • mediatypes مكانها نضع كلمة مفتاحية أو أكثر تشير إلى نوع الوسائط مع الإشارة إلى أ،ه يجب وضع فاصلة بين كل كلمتين.
  • expressions مكانها يمكن وضع شرط أو أكثر يكون متوافق مع نوع الوسائط ليحدد متى سيتم تطبيق الخصائص.
  • not كلمة إختيارية يمكن وضعها لعدم تطبيق الخصائص في الحالة و الشرط الموضوعين.
  • only كلمة إختيارية يمكن وضعها لتطبيق الخصائص في الحالة و الشرط الموضوعين.
  • CSS-Code مكانها يمكن وضع أي كود CSS ليتم تطبيقه في حال كان نوع الوسائط و الشرط الموضوع تم تحقيقهما.

أنواع إستعلامات الوسائط

نوع الوسائط ( Media Type ) يقصد به نوع الجهاز أو السبب الرئيسي الذي على أساسه سيتم تطبيق الخصائص. فيما يلي أهم أنواع إستعلامات الوسائط.

النوع إستخدامه
all لتطبيق الخصائص مهما كان النوع و هذه القيمة الإفتراضية.
screen لتطبيق الخصائص فقط في حال إستعراض الصفحة على شاشة سواء حاسوب، هاتف، كمبيوتر، تلفاز.
print لتطبيق الخصائص في حال طباعة الصفحة فقط.

في المثال التالي جعلنا لون النص يصبح أحمر في حال كان حجم الشاشة على الأكثر هو 400 بكسل.

المثال الأول

@media screen and (max-width: 400px) {
p {
color: red;
}
}
@media screen and (max-width: 400px) { p { color: red; } }
جرب الكود

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


في المثال التالي جعلنا لون النص الأساسي رمادي، ثم جعلنا لون النص يصبح أحمر في حال كان حجم الشاشة على الأكثر هو 400 بكسل.

المثال الثاني

p {
color: gray;
}
@media screen and (max-width: 400px) {
p {
color: red;
}
}
p { color: gray; } @media screen and (max-width: 400px) { p { color: red; } }
جرب الكود

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


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

المثال الثالث

@media screen and (max-width: 400px) {
p {
color: red;
}
}
p {
color: gray;
}
@media screen and (max-width: 400px) { p { color: red; } } p { color: gray; }
جرب الكود

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

المثال الرابع

p {
color: gray;
}
@media print {
p {
color: red;
}
}
p { color: gray; } @media print { p { color: red; } }
جرب الكود

في المثال التالي حددنا أن لون النص هو بني في حال استعراض الصفحة على شاشة أو على آلة طباعة.

المثال الخامس

@media screen, print {
p {
color: brown;
}
}
@media screen, print { p { color: brown; } }
جرب الكود

في المثال السابق كان يمكننا استخدام الكلمة or بدلاً من الفاصلة.


المثال التالي هو نفسه المثال السابق مع استخدام الكلمة or بدلاً من الفاصلة.

المثال السادس

@media screen or print {
p {
color: brown;
}
}
@media screen or print { p { color: brown; } }
جرب الكود

في المثال التالي حددنا أن لون النص هو بني في كل الحالات ما عدا إن تم طباعته.

المثال السابع

@media not print {
p {
color: brown;
}
}
@media not print { p { color: brown; } }
جرب الكود

شروط إستعلامات الوسائط

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


في المثال التالي إذا كان حجم الشاشة على الأقل 400 بكسل فإنه سيتم تطبيق الخصائص.

المثال الأول

@media (min-width: 400px) {
body {
padding: 20px
}
}
@media (min-width: 400px) { body { padding: 20px } }
جرب الكود

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

المثال الثاني

@media (min-width: 400px) and (max-width: 1000px) {
body {
padding: 20px;
}
}
@media (min-width: 400px) and (max-width: 1000px) { body { padding: 20px; } }
جرب الكود

في المثال التالي إذا كان حجم الشاشة ما بين 400 و 1000 بكسل فإنه سيتم تطبيق الخصائص.

المثال الثالث

@media (400px <= width <= 1000px) {
body {
padding: 20px;
}
}
@media (400px <= width <= 1000px) { body { padding: 20px; } }
جرب الكود

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

المثال الرابع

h1 {
font-size: 1.8rem;
}
@media (min-width: 768px) {
h1 {
font-size: 2.2rem;
}
}
@media (min-width: 960px) {
h1 {
font-size: 2.6rem;
}
}
h1 { font-size: 1.8rem; } @media (min-width: 768px) { h1 { font-size: 2.2rem; } } @media (min-width: 960px) { h1 { font-size: 2.6rem; } }
جرب الكود

في المثال التالي إذا كانت الشاشة معروضة بالوضع الأفقي فإنه سيتم عرض عبارة Landscape، أما إن كانت معروضة بالوضع العمودي فإنه سيتم عرض عبارة Portrait.

المثال الخامس

@media (orientation: landscape) {
#orientation::before {
content: 'Landscape Mode';
}
}
@media (orientation: portrait) {
#orientation::before {
content: 'Portrait Mode';
}
}
@media (orientation: landscape) { #orientation::before { content: 'Landscape Mode'; } } @media (orientation: portrait) { #orientation::before { content: 'Portrait Mode'; } }
جرب الكود

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

المثال السادس

@media (min-height: 680px), screen and (orientation: portrait) {
body {
padding: 20px;
}
}
@media (min-height: 680px), screen and (orientation: portrait) { body { padding: 20px; } }
جرب الكود
الدرس التالي❯ ❮الدرس السابق