ما هو استعلام وسائل الإعلام؟
الاستعلام وسائل الإعلام هي تقنية CSS قدم في CSS3.
ويستخدم @media القاعدة تشمل كتلة من خصائص CSS فقط إذا كان شرط معين هو الصحيح.
مثال
إذا كانت نافذة المتصفح أصغر من 500px، ولون الخلفية تغيير إلى lightblue:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
انها محاولة لنفسك » إضافة نقطة توقف
في هذا البرنامج التعليمي في وقت سابق قدمنا صفحة ويب مع الصفوف والأعمدة، وكان يستجيب، ولكن لا تبدو جيدة على الشاشة الصغيرة.
يمكن استفسارات وسائل الإعلام تساعد على ذلك. ويمكننا أن نضيف نقطة توقف حيث أجزاء معينة من التصميم سوف تتصرف بشكل مختلف على كل جانب من نقطة توقف.
سطح المكتب
هاتف
استخدام استعلام وسائل الاعلام لإضافة نقطة توقف في 768px:
مثال
عندما يحصل على الشاشة (نافذة المتصفح) أصغر من 768px، يجب أن يكون كل عمود بعرض 100٪:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
انها محاولة لنفسك » تصميم دائما للموبايل الأولى
المحمول الأولى يعني تصميم للجوال قبل تصميم لسطح المكتب أو أي جهاز آخر (وهذا سيجعل من عرض الصفحة بشكل أسرع على الأجهزة الأصغر).
وهذا يعني أنه يجب علينا إجراء بعض التغييرات في CSS لدينا.
بدلا من تغيير الأنماط عندما يحصل على عرض أصغر من 768px، يجب علينا تغيير تصميم عندما يحصل على عرض أكبر من 768px. وهذا سيجعل لدينا تصميم موبايل أولا:
مثال
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
انها محاولة لنفسك » نقطة توقف آخر
يمكنك إضافة العديد من نقاط التوقف كما تريد.
ونحن أيضا إدراج نقطة توقف بين أقراص والهواتف المحمولة.
سطح المكتب
لوح
هاتف
ونحن نفعل ذلك من خلال إضافة المزيد من استعلام واحد وسائل الاعلام (في 600px ل)، ومجموعة من الطبقات جديدة لأجهزة أكبر من 600px ل(ولكن أصغر من 768px):
مثال
لاحظ أن مجموعتين من الطبقات تكاد تكون متطابقة، والفرق الوحيد هو اسم ( col- و col-m- ):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
} انها محاولة لنفسك » قد يبدو غريبا أن لدينا مجموعتين من الطبقات متطابقة، لكنه يتيح لنا الفرصة في HTML، لتقرر ما سوف يحدث مع الأعمدة في كل نقطة:
HTML مثال
لسطح المكتب:
أول والقسم الثالث على حد سواء تمتد 3 أعمدة لكل منهما. والجزء الأوسط تمتد 6 أعمدة.
بالنسبة للأجهزة اللوحية:
القسم الأول سوف تمتد 3 أعمدة، والثانية تمتد 9، وسوف يتم عرض الجزء الثالث تحت القسمين الأول، وسوف تمتد 12 عمودا:
<div class="row">
<div class="col-3 col-m-3">...</div>
<div
class="col-6 col-m-9">...</div>
<div
class="col-3 col-m-12">...</div>
</div>الاتجاه: عمودي / أفقي
ويمكن أيضا استفسارات وسائل الإعلام أن تستخدم لتغيير تصميم صفحة اعتمادا على التوجه للمتصفح.
هل يمكن أن يكون مجموعة من الخصائص CSS التي سيتم تطبيقها فقط عندما نافذة المتصفح هو أوسع من ارتفاعه، وهو ما يسمى التوجه "المشهد":
مثال
صفحة الويب سيكون له خلفية lightblue إذا كان التوجه هو في وضع أفقي:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} انها محاولة لنفسك »