تصميم الويب سريع الاستجابة - استعلامات الوسائط
ما هو استعلام الوسائط؟
الاستعلام عن الوسائط هو تقنية CSS تم تقديمها في CSS3.
يستخدم @mediaالقاعدة لتضمين كتلة من خصائص CSS فقط إذا كان شرط معين صحيحًا.
مثال
إذا كانت نافذة المتصفح 600 بكسل أو أصغر ، فسيكون لون الخلفية أزرق فاتح:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
أضف نقطة توقف
في وقت سابق من هذا البرنامج التعليمي ، قمنا بإنشاء صفحة ويب تحتوي على صفوف وأعمدة ، وكانت سريعة الاستجابة ، لكنها لم تبدو جيدة على شاشة صغيرة.
يمكن أن تساعد الاستعلامات الإعلامية في ذلك. يمكننا إضافة نقطة توقف حيث تتصرف أجزاء معينة من التصميم بشكل مختلف على كل جانب من جوانب نقطة التوقف.
سطح المكتب
هاتف
استخدم استعلام وسائط لإضافة نقطة توقف عند 768 بكسل:
مثال
عندما تصبح الشاشة (نافذة المتصفح) أصغر من 768 بكسل ، يجب أن يكون عرض كل عمود 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%;
}
}
صمم دائمًا للجوال أولاً
يعني Mobile First التصميم للجوال قبل التصميم لسطح المكتب أو أي جهاز آخر (سيؤدي ذلك إلى عرض الصفحة بشكل أسرع على الأجهزة الأصغر).
هذا يعني أنه يجب علينا إجراء بعض التغييرات في CSS الخاص بنا.
بدلاً من تغيير الأنماط عندما يقل العرض عن 768 بكسل ، يجب علينا تغيير التصميم عندما يصبح العرض أكبر من 768 بكسل. هذا سيجعل تصميمنا Mobile First:
مثال
/* 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%;}
}
نقطة توقف أخرى
يمكنك إضافة العديد من نقاط التوقف كما تريد.
سنقوم أيضًا بإدخال نقطة توقف بين الأجهزة اللوحية والهواتف المحمولة.
سطح المكتب
لوح
هاتف
نقوم بذلك عن طريق إضافة استعلام وسائط آخر (بحجم 600 بكسل) ، ومجموعة من الفئات الجديدة للأجهزة التي يزيد حجمها عن 600 بكسل (ولكن أصغر من 768 بكسل):
مثال
لاحظ أن مجموعتي الفئات متطابقة تقريبًا ، والفرق الوحيد هو الاسم ( col-و col-s-):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
.col-s-6 {width: 50%;}
.col-s-7 {width: 58.33%;}
.col-s-8 {width: 66.66%;}
.col-s-9 {width: 75%;}
.col-s-10 {width: 83.33%;}
.col-s-11 {width: 91.66%;}
.col-s-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-s-3">...</div>
<div
class="col-6 col-s-9">...</div>
<div
class="col-3 col-s-12">...</div>
</div>
نقاط توقف الجهاز النموذجية
هناك الكثير من الشاشات والأجهزة ذات الارتفاعات والعرض المختلفة ، لذلك من الصعب إنشاء نقطة توقف دقيقة لكل جهاز. لتبسيط الأمور ، يمكنك استهداف خمس مجموعات:
مثال
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
الاتجاه: عمودي / أفقي
يمكن أيضًا استخدام استعلامات الوسائط لتغيير تخطيط الصفحة اعتمادًا على اتجاه المتصفح.
يمكنك الحصول على مجموعة من خصائص CSS التي لن يتم تطبيقها إلا عندما تكون نافذة المتصفح أكبر من ارتفاعها ، وهو ما يسمى بالاتجاه "الأفقي":
مثال
ستحتوي صفحة الويب على خلفية زرقاء فاتحة إذا كان الاتجاه في الوضع الأفقي:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
إخفاء العناصر باستخدام استعلامات الوسائط
استخدام آخر شائع لاستعلامات الوسائط ، هو إخفاء العناصر الموجودة على أحجام الشاشات المختلفة:
مثال
/* If the screen size is 600px wide or less, hide the element */
@media
only screen and (max-width: 600px) {
div.example {
display: none;
}
}
تغيير حجم الخط باستخدام استعلامات الوسائط
يمكنك أيضًا استخدام استعلامات الوسائط لتغيير حجم خط عنصر على أحجام شاشات مختلفة:
حجم الخط المتغير.
مثال
/* If the screen size is 601px or
more, set the font-size of <div> to 80px */
@media only screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px or
less,
set the font-size of <div> to 30px */
@media only screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
مرجع CSSmedia
للحصول على نظرة عامة كاملة على جميع أنواع الوسائط والميزات / التعبيرات ، يرجى إلقاء نظرة على قاعدةmedia في مرجع CSS الخاص بنا .