انقر على شريط استعلام الوسائط المرئي الذي يقابل استعلام الوسائط الذي تريد تعديله.
تاريخ آخر تحديث
20 ديسمبر 2021
استخدم "استعلامات الوسائط المرئية" لعرض صفحات الويب وتحريرها في نقاط فواصل مختلفة ومطابقة لأحجام الشاشة المختلفة.
استعلامات الوسائط هي وحدة CSS3 تساعدك في تصميم مواقع ويب استجابة عن طريق تحديد قواعد نمط مختلف لأجهزة مختلفة أو أنواع وسائط. بناءً على هذه القواعد، يتم عرض المحتوى ليتكيف مع ظروف مختلفة، مثل أحجام الشاشات وأحجام نوافذ المتصفح وأحجام الأجهزة واتجاهها ودقة الوضوح.
يمكنك إضافة استعلامات الوسائط باستخدام قاعدة @media لـ CSS. أو يمكنك إنشاء أوراق أنماط منفصلة لأنواع وسائط مختلفة ثم استدعاؤها باستخدام البنية التالية:
<link rel="stylesheet" media="all" href="normal.css" />
<link rel="stylesheet" media="print" href="print.css" />
<link rel="stylesheet" media="screen and (min-width: 701px)" href="medium.css" />
يفحص المستعرض في جهاز ما استعلام الوسائط ويستخدم ملف CSS المتناظر لعرض صفحة الويب.
للاطلاع على المزيد من المعلومات، راجع هذه المقالة.
يمكنك إضافة استعلامات الوسائط عن طريق إضافة الكود البرمجي ذات الصلة لأحد ملفي HTML أو CSS. بالإضافة إلى ذلك، يتيح لك Dreamweaver إنشاء وإدارة استعلامات الوسائط بسهولة باستخدام:
الاختلاف الأساسي بين هذين الأسلوبين هو العرض المرئي. إذا كنت تفضل تعيين التغييرات في طريقة العرض Live ككود برمجي ثم عرضها، فاستخدم CSS Designer. وإذا كنت تفضل عرض صفحتك في نقاط فاصل مختلفة وإجراء تغييرات تصميم على الفور، فاستعلام الوسائط المرئية هو الأفضل.أشرطة استعلام الوسائط المرئية
أشرطة استعلام الوسائط المرئية هي تمثيل مرئي لاستعلامات الوسائط الموجودة في الصفحة. تساعدك هذه الأشرطة في عرض صفحتك في نقاط فاصل مختلفة وكيف يتم إعادة تدفق مكونات مختلفة لصفحة الويب لديك في زوايا مختلفة. بينما تقوم بعرض صفحتك في زوايا مختلفة، يمكنك إجراء تغييرات تصميم محددة في زاوية بدون التأثير على تصميم الصفحة في زوايا أخرى.
يتكون استعلام الوسائط المرئية من ثلاثة أشرطة كصفوف أفقية، يمثل كل صف فئة من استعلام الوسائط:
أخضر: استعلامات الوسائط مع شروط العرض الأقصى
أزرق : استعلامات الوسائط مع شروط العرض الأدنى والأقصى معًا
بنفسجي : استعلامات الوسائط مع شروط العرض الأدنى
استعلامات الوسائط المدرجة في لوحة مصمم CSS مسبوقة أيضًا بهذه الألوان.
يمكن أن تحتوي كل فئة على استعلام وسائط أو أكثر. إذا لم يتم تعريف شرط استعلام الوسائط في المستند، فلن يتم عرض شريط استعلام الوسائط المرئي المقابل، أيضًا. على سبيل المثال، إذا كان المستند لا يحتوي على شروط العرض الأدنى، فلن يتم عرض الشريط البنفسجي.
تُشار قيم نقاط القطع على الأشرطة - العرض الأدنى على اليسار والعرض الأقصى على يمين الشريط.
A. نقاط الفاصل B. أشرطة استعلام الوسائط المرئية C. إضافة رمز استعلام وسائط D. الشريط المنزلق
إخفاء أو إظهار استعلامات الوسائط المرئية
يكون شريط استعلام الوسائط المرئية مرئيًا في طريقة العرض Live بشكل افتراضي. لإخفاء الشريط، استخدم زر تبديل شريط استعلامات الوسائط المرئية في شريط الأدوات.
التبديل بين نقاط التوقف
لعرض صفحتك بحجم معين (نقطة فاصل)، انقر فوق شريط استعلام الوسائط المقابل. سينجذب المستند إلى نقطة القطع.
بدلاً من ذلك، يمكنك سحب المُمرر إلى نقطة القطع المطلوبة.
لتغيير حجم العرض إلى حجم نافذة مستند Dreamweaver، قم بأحد الإجراءات التالية:
- انقر نقرًا مزدوجًا فوق أي مكان في المنطقة الرمادية في الجزء الأيسر للمستند حيث ترى النص "Double Click To Fit Width". إذا كنت لا ترى المنطقة الرمادية، اسحب المُمرر إلى اليسار.
- حدد خيار العرض الكامل في القائمة المنسدلة أسفل نافذة المستند.
إذا كنت لا ترى هذا الخيار، اسحب المُمرر لتقليل حجم صفحة الويب.
تعديل استعلامات الوسائط بصريًا
تظهر مقابض تغيير الحجم. بالنسبة لاستعلامات الوسائط التي تحتوي على قيم min وmax-width، تظهر مقابض تغيير الحجم على كلا جانبي الشريط.
اسحب المقابض إلى الحجم المطلوب.
يتم تحديث استعلامات الوسائط تلقائيًا بالقيم min-width و/أو max-width. يتم عرض إعلام للإشارة إلى أنه تم تحرير استعلام الوسائط بنجاح. إذا كان هناك العديد من استعلامات الوسائط تتوافق مع شريط استعلام الوسائط المرئية، يتم تحديث جميع استعلامات الوسائط. يتم عرض عدد استعلامات الوسائط التي تم تحديثها مع رسالة النجاح.
للتراجع، اضغط على Ctrl+Z (Win) أو Cmd+Z (Mac).
بدلاً من ذلك، يمكنك النقر المزدوج على قيم نقطة الانقطاع لكتابة القيم باستخدام لوحة المفاتيح.
أضِف استعلامات وسائط جديدة
اسحب شريط التمرير على طول المسطرة إلى الحجم المطلوب.
انقر فوق 
.
في القائمة المنبثقة التي تظهر، يتم تحديد خيار max-width افتراضيًا. لتحديد min-width أو min-max، حدد الخيار المناسب في القائمة المنسدلة وحدد الوحدات المطلوبة.
ثم، حدد مصدر CSS الذي يجب إضافة استعلام الوسائط إليه.
إذا اخترت إنشاء ملف CSS جديد، فستظهر نافذة منبثقة أخرى. حدد اسم ومسار ملف CSS الجديد وانقر على OK.
للتراجع، اضغط على Ctrl+Z (Win) أو Cmd+Z (Mac).
احذف استعلامات الوسائط
انقر بزر الماوس الأيمن على شريط استعلام الوسائط المرئي المقابل.
انقر على Delete ثم انقر على استعلام الوسائط الذي تريد حذفه.
انقر على OK لتأكيد أنك تريد حذف جميع استعلامات الوسائط والمحددات المرتبطة بها.
للتراجع، اضغط على Ctrl+Z (Win) أو Cmd+Z (Mac).
عرض الكود لاستعلامات الوسائط
انقر بزر الماوس الأيمن على شريط استعلام الوسائط المرئي المطلوب ومرّر مؤشر الماوس فوق Go To Code.
تظهر قائمة بجميع استعلامات الوسائط في نطاق نقطة الانقطاع المحددة مع الملفات التي تم الإعلان عنها فيها.
انقر على استعلام الوسائط المطلوب للانتقال إلى الكود المقابل في عرض الكود.
إذا لم يكن عرض الكود مرئياً، يتم تبديل المستند إلى عرض مقسم لإظهار الكود.
قم بإنشاء مواقع ويب جميلة في Dreamweaver
قم بتصميم مواقع الويب الديناميكية وبرمجتها وإدارتها في أداة قوية متكاملة.
