CSS الاستعلام الإعلامي - مثال
- الصفحة السابقة تحقيق الاستعلام الإعلامي
- الصفحة التالية مقدمة RWD
CSS الاستعلام الإعلامي - أمثلة إضافية
لنلقي نظرة على أمثلة إضافية للاستعلام الإعلامي.
الاستعلام الإعلامي هو تقنية شائعة تستخدم لنقل قوائم الأنماط المخصصة إلى الأجهزة المختلفة.
في هذا المثال البسيط، سنجرب تغيير لون الخلفية للأجهزة المختلفة:
مثال
/* قم بتعيين لون الخلفية للجسم إلى اللون البني الفاتح */
body {
background-color: tan;
}
/* قم بتعيين لون الخلفية إلى اللون الأزرق في شاشات أقل من أو تساوي 992 بكسل */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* قم بتعيين لون الخلفية إلى اللون الخضري في شاشات 600 بكسل أو أصغر */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
هل تريد معرفة لماذا نستخدم بدقة 992px و600px؟ إنها ما نسميها نقاط التوقف النموذجية للجهاز (typical breakpoints). يمكنك العثور على المزيد في دليل تصميم الويب المتجاوب تعلم المزيد عن نقاط التوقف النموذجية في HTML.
استعلامات الإعلام للقائمة
في هذا المثال، نستخدم الاستعلامات الإعلامية لإنشاء قائمة توجيهية م-responsive، تتغير بين حجم الشاشة المختلفة.
مثال
/* وحدة الحاوية للشريط الصغير */
.topnav {
overflow: hidden;
background-color: #333;
}
/* رابطي القائمة في الشريط الصغير */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* على شاشات عرض 600بكسل أو أقل، تجعل رابطي القائمة تتراص بدلاً من أن تكون متوازية */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
استعلامات الإعلام للأعمدة
استخدام الاستعلامات الإعلامية لإنشاء تخطيط مرن. في هذا المثال، قمنا بإنشاء تخطيط يتغير بين أربعة أعمدة، أثنين من الأعمدة، والأعمدة الكاملة العرض، بناءً على حجم الشاشة المختلفة:
شاشات كبيرة:
شاشات متوسطة:
شاشات صغيرة:
مثال
/* إنشاء أربعة أعمدة متساوية متجاورات بعضها البعض */
.column {
float: left;
width: 25%;
}
/* على شاشات عرض 992بكسل أو أقل، تتحول من أربعة أعمدة إلى اثنين */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* على شاشات عرض أقل من أو تساوي 600 بكسل، تجعل الأعمدة تتراص بدلاً من أن تكون متوازية */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
نصيحة:الطريقة الأكثر تقدمًا لإنشاء تخطيط الأعمدة هي استخدام CSS Flexbox (انظر الأمثلة أدناه). ولكن، لا يدعمها إصدار Internet Explorer 10 وما قبل ذلك. إذا كنت بحاجة إلى دعم IE6-10، استخدم الفواصل العلوية (كما هو موضح أعلاه).
للتعرف على المزيد حول وحدة التخطيط المرن Flexbox، يرجى دراسة Flexbox CSS هذه الفقرة.
للتعرف على المزيد حول تصميم الويب الم-responsive، يرجى دراسة دليل تصميم الويب المتجاوب.
مثال
/* وحدة الحاوية للصندوق المرن */
.row {
display: flex;
flex-wrap: wrap;
}
/* إنشاء أربعة أعمدة متساوية */
.column {
flex: 25%;
padding: 20px;
}
/* على شاشات عرض 992بكسل أو أقل، تتحول من أربعة أعمدة إلى اثنين */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* على شاشات عرض أقل من أو تساوي 600 بكسل، تجعل الأعمدة تتراص بدلاً من أن تكون متوازية */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
استخدام الاستعلامات الإعلامية لإخفاء العناصر
استخدام الاستعلامات الإعلامية لإخفاء العناصر على أجهزة مختلفة في حجم الشاشة:
سأخفي العنصر على الشاشات الصغيرة.
مثال
/* إذا كان حجم الشاشة 600 بكسل أو أقل، قم بإخفاء العنصر */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
تغيير حجم الخط باستخدام استعلام وسائل الاعلام
يمكنك أيضًا استخدام استعلامات وسائل الاعلام لتغيير حجم الخط للأعمدة المختلفة على مختلف أحجام الشاشات:
حجم الخط المتغير
مثال
/* إذا كان حجم الشاشة أكبر من 600 بكسل، قم بتعيين حجم الخط لـ <div> إلى 80 بكسل */
@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* إذا كان حجم الشاشة 600 بكسل أو أقل، قم بتعيين حجم الخط لـ <div> إلى 30 بكسل */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
مكتبة صور مرنة
في هذا المثال، سنستخدم استعلامات وسائل الاعلام مع flexbox لإنشاء مكتبة صور ردئة:
مثال
موقع مرن
في هذا المثال، سنستخدم استعلامات وسائل الاعلام مع flexbox لإنشاء موقع ردئي، يحتوي على قائمة توجيه مرنة ومحتوى مرن.
مثال
اتجاه: صورة / مناظر طبيعية
يمكن استخدام استعلامات وسائل الاعلام أيضًا لتغيير تصميم الصفحة بناءً على اتجاه المتصفح.
يمكنك تعيين مجموعة من خصائص CSS، وتطبيقها فقط عندما يكون عرض نافذة المتصفح أكبر من ارتفاعها، مما يُعرف بالشاشة الأفقية:
مثال
إذا كانت الاتجاه في الوضع الأفقي، استخدم لون الخلفية الأزرق الفاتح:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
من الأحجام الأدنى إلى الأعلى
يمكنك أيضًا استخدام خصائص max-width وmin-width لضبط الأحجام الأدنى والأعلى للعرض.
على سبيل المثال، عند وجود عرض للمتصفح بين 600 إلى 900 بكسل، تغيير مظهر عنصر <div>:
مثال
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
استخدام القيمة الإضافية: في المثال التالي، نستخدمomma (مثل عمودي OR) لضيف استعلامات وسائل الاعلام الإضافية إلى استعلامات وسائل الاعلام القائمة:
مثال
/* عند وجود عرض بين 600 بكسل و900 بكسل أو أكبر من 1100 بكسل - تغيير مظهر <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
دليل @media CSS
للإطلاع على وصف شامل لجميع أنواع الاستعلامات الإعلامية والخصائص/التعبيرات، يرجى الرجوع إلى قواعد @media في دليل CSS.
نصيحة:للتعلم عن تصميم الويب المتجاوب (كيفية التكيف مع الأجهزة المختلفة والشاشات) والاستعلامات الإعلامية، يرجى قراءة دليل تصميم الويب المتجاوب.
- الصفحة السابقة تحقيق الاستعلام الإعلامي
- الصفحة التالية مقدمة RWD
