Loading...

​​كُل ما يتعلّق بالـMedia Queries

​​

​​سوف نتحدّث في هذا المقالة عن مجموعة الميديا كويري (Media Queries) بصورة متكاملة وشاملة, حيث ستكون هذه المقالة مرجعك المفضّل والمفصّل لكل ما يخص هذه الخاصية إن شاء الله ​😊​ .

​​

​​مُكونات المقالة :

1. ​​أين يمكننا كتابة مجموعة الميديا كويري والإستفاده منها ؟

2. ​​طريقة كتابة الميديا كويري.

3. ​​مجموعة الميديا كويري.

4. ​​صفات الميديا كويري والرابط (and).

5. ​​أنواع الميديا كويري.

6. ​​مميزات الميديا كويري و أنوعها.

7. ​​خصائص ال(CSS) ضد مميزات الميديا.

8. ​​مرجِع للمميزات الميديا كويري.

​​

​​أين يمكننا كتابة مجموعة الميديا كويري (Media Queries) و الإستفاده منها ؟

​​

• ​​القاعدة media@ : هي أكثر الأماكن التى تستخدم فيها, وذلك لأنها مصمّمة خصيصاً لها!

​​

​​مثال :

​​@media screen and (max-width: 800px) {

​​    /*---- CSS Code Here ----*/

​​}

​​


​​@media print {

​​    /*---- CSS Code Here ----*/

​​}

​​

• ​​القاعدة import@ : يُمكننا ايضاً إدراج الميديا كويري (Media Queries) مع هذه القاعدة, و ذلك لوضع شرط او أكثر; لإستخراج (إدراج) اكواد الCSS الموجودة في الرابط المذكور في القاعدة إلى كود الCSS الذى تم ذكر القاعدة فيه.

​​

​​مثال :

​​@import url("css/style.css") screen and (min-width: 800px);

​​@import "css/print.css" print;

​​

• ​​الخاصية media في وسم الربط link : و قد أصبح لها خاصية (attribute) خاص بها في وسم (<link>), تمُكنك من وضع شروط خاصة حتى يتم تنفيذ ملف الCSS المربوط بالمستند بواسطة هذا الوسم!

​​

​​مثال :

​​<link rel="stylesheet" href="style.css" media="screen and (max-width: 800px)">

​​<link rel="stylesheet" href="print.css" media="print">

​​

​​

​​طريقة الكتابة :

​​القاعدة ميديا (Media@)

​​تتكون من الكلمة المعرّفة media@ و مجموعة ميديا كويري (Media Queries), حيث يفصل بين أول ميديا كويري (Media Query) و الكلمة المعرّفة media@ بفراغ نصي أما الفصل بين كل ميديا كويري (Media Query) و أخرى يكون عبارة عن فاصلة (,) و سنذكر معنى الفاصل لاحقاً في هذه المقالة .

​​

​​@media Media_Queries {

​​    /*---- CSS Code Here ----*/

​​}

​​/*

​​    Where :

​​    Media_Queries = Media_Query1, Media_Query2, ..., Media_QueryN