دليل المستخدم إلغاء

إنشاء استعلامات الوسائط

بحث

تاريخ آخر تحديث 20 ديسمبر 2021

يمكنك استخدام استعلامات وسائط لتحديد ملفات CSS استنادًا إلى السمات المعطاة عن الجهاز (تصميم استجابة). يفحص المستعرض في جهاز ما استعلام الوسائط ويستخدم ملف CSS المتناظر لعرض صفحة الويب.

على سبيل المثال، يحدد استعلام الوسائط التالي ملف phone.css للأجهزة التي يبلغ عرضها 300-320 بكسل.

<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">

للاطلاع على مقدمة ممتدة عن استعلامات الوسائط، راجع مقال Don Booth على Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_ae.

لمزيد من المعلومات عن استعلامات الوسائط من W3C، راجع www.w3.org/TR/css3-mediaqueries/.

إنشاء استعلام وسائط

في Dreamweaver، يمكنك إنشاء ملف استعلام وسائط على مستوى موقع، أو استعلام وسائط خاص بمستند.

ملف استعلام وسائط على مستوى الموقع

تحديد إعدادات عرض لكل الصفحات في موقعك والتي تشتمل على الملف.

يكون ملف استعلام الوسائط على مستوى الموقع بمثابة المستودع المركزي لكل استعلامات الوسائط في موقعك. بعد إنشائك هذا الملف، قم بعمل ارتباط له من الصفحات الموجودة في موقعك والتي يجب أن تستخدم استعلامات الوسائط في الملف لعرضها.

استعلام وسائط خاص بمستند

يتم إدراج استعلام الوسائط مباشرةً في المستند، وعرض الصفحة استنادًا إلى استعلام الوسائط المدرج.

قم بإنشاء صفحة ويب.
حدد Modify > Media Queries.
قم بأحد الإجراءات التالية:
- لإنشاء ملف استعلام وسائط على مستوى الموقع، حدد Site Wide Media Queries File.
- لإنشاء استعلام وسائط خاص بمستند، حدد This Document.
بالنسبة إلى استعلام الوسائط على مستوى الموقع، قم بما يلي:
1. انقر فوق Specify.
2. حدد Create New File.
3. حدد اسمًا للملف، وانقر فوق OK.
من الممكن ألا توضح بعض الأجهزة عرضها الفعلي. لإجبار الأجهزة على عرض عرضها الفعلي، تأكد من تمكين الخيار Force Devices To Report Actual Width.

يتم إدراج التعليمة البرمجية التالية إلى ملفك عند تحديد هذا الخيار.
```
<meta name="viewport" content="width=device-width">
```
قم بأحد الإجراءات التالية:
- انقر فوق "+" لتحديد خصائص ملف استعلام الوسائط.
- انقر فوق Default Presets إذا كنت ترغب في البدء بالإعدادات المسبقة القياسية.
حدد صفوفًا في الجدول، وقم بتحرير خصائصها باستخدام الخيارات الموجودة أسفل Properties.

Description

وصف الجهاز الذي يجب استخدام ملف CSS له. على سبيل المثال، الهاتف، والتلفاز، واللوح، وما إلى ذلك.

Min Width وMax width

يُستخدم ملف CSS للأجهزة التي يكون عرضها الموضح ضمن القيم المحددة.

ملاحظة:

اترك الحقل Min Width أو Max Width فارغًا إذا كنت تريد تحديد نطاق واضح لجهاز. على سبيل المثال، من الشائع ترك Min Width فارغًا إذا كنت تريد استهداف الهواتف التي يبلغ عرضها 320 بكسل أو أقل.

ملف CSS

حدد Use Existing File، وقم بالاستعراض إلى ملف CSS للجهاز.

إذا كنت تريد تحديد ملف CSS الذي ستقوم بإنشائه، فحدد Create New File. أدخل اسم ملف CSS. يتم إنشاء الملف عند ضغطك على OK.
انقر فوق OK.
بالنسبة إلى استعلام الوسائط على مستوى الموقع، يتم إنشاء ملف جديد. قم بحفظه.

استعلام الوسائط على مستوى الموقع: بالنسبة إلى الصفحات الموجودة، تأكد من تضمينك لملف استعلام الوسائط في كل الصفحات بالعلامة <head>.

وفيما يلي مثال على ارتباط استعلام وسائط حيث mediaquery_adobedotcom.css هو ملف استعلام وسائط على مستوى الموقع للموقع www.adobe.com/ae:

<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">

استخدام ملف استعلامات وسائط موجود

إنشاء صفحة ويب، أو فتح صفحة موجودة.
حدد Modify > Media Queries.
حدد Site-Wide Media Queries File.
انقر فوق Specify.
حدد Use Existing File إذا كان لديك ملف CSS تم إنشاؤه بالفعل باستخدام Media Query.
انقر فوق أيقونة الاستعراض للتنقل إلى الملف وتحديده. انقر فوق OK.
حدد Site-Wide Media Queries File.
لإجبار الأجهزة على عرض عرضها الفعلي، تأكد من تمكين الخيار Force Devices To Report Actual Width. يتم إدراج التعليمة البرمجية التالية إلى ملفك عند تحديد هذا الخيار.
```
<meta name="viewport" content="width=device-width">
```
انقر فوق OK.

اختيار ملف استعلامات وسائط مختلف على مستوى الموقع

استخدم هذا الإجراء لتغيير ملف استعلامات وسائط على مستوى الموقع الذي قمت بتعيينه في مربع الحوار Media Queries.

حدد Site > Manage Sites.
في مربع الحوار Manage Sites، حدد موقعك.
انقر فوق Edit. يتم عرض مربع الحوار Site Setup.
ضمن Advanced Settings في اللوحة اليسرى، حدد Local Info.
في Site-Wide Media Query File في اللوحة اليمنى، انقر فوق Browse لتحديد ملف استعلام الوسائط CSS.

ملاحظة:

لا يؤثر تغيير ملف استعلامات الوسائط على مستوى الموقع على المستندات المرتبطة بملف استعلام وسائط مختلف أو سابق على مستوى الموقع.
انقر فوق Save.

عرض صفحات الويب استنادًا إلى استعلام الوسائط

تظهر الأبعاد المحددة في استعلام وسائط في خيارات حجم النافذة/الزر Multiscreen. عند تحديد بُعد من القائمة، تظهر التغييرات التالية:

يتغير حجم العرض لتفعيل الأبعاد المحددة. لا يتغير حجم إطار المستند.
يُستخدم ملف CSS المحدد في استعلام الوسائط لعرض الصفحة.

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟