قم بإنشاء صفحة ويب.
تاريخ آخر تحديث
27 أبريل 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_en.
لمزيد من المعلومات حول استعلامات الوسائط من W3C راجع www.w3.org/TR/css3-mediaqueries/.
إنشاء استعلام وسائط
في Dreamweaver، يمكنك إنشاء ملف استعلام وسائط على مستوى الموقع، أو استعلام وسائط خاص بالمستند.
ملف استعلامات الوسائط على مستوى الموقع
يحدد إعدادات العرض لجميع الصفحات في موقعك التي تتضمن الملف.
يعمل ملف استعلام الوسائط على مستوى الموقع كمستودع مركزي لجميع استعلامات الوسائط في موقعك.بعد إنشاء هذا الملف، اربطه من الصفحات في موقعك التي يجب أن تستخدم استعلامات الوسائط الموجودة في الملف لعرضها.
استعلام الوسائط الخاص بالمستند
يتم إدراج استعلام الوسائط مباشرة في المستند، ويتم عرض الصفحة استناداً إلى استعلام الوسائط المُدرج.
حدد Modify > Media Queries.
قم بأحد الإجراءات التالية:
لإنشاء ملف استعلام وسائط على مستوى الموقع، حدد Site Wide Media Queries File.
لإنشاء استعلام وسائط خاص بمستند، حدد This Document.
بالنسبة إلى استعلام الوسائط على مستوى الموقع، قم بما يلي:
انقر فوق Specify.
حدد Create New File.
حدد اسمًا للملف، وانقر فوق 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:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
استخدام ملف استعلامات وسائط موجود
إنشاء صفحة ويب، أو فتح صفحة موجودة.
حدد Modify > Media Queries.
حدد Site-Wide Media Queries File.
انقر فوق Specify.
حدد استخدام ملف موجود إذا كنت قد قمت بإنشاء ملف CSS بالفعل مع استعلام الوسائط.
انقر فوق أيقونة الاستعراض للتنقل إلى الملف وتحديده. انقر فوق OK.
حدد Site-Wide Media Queries File.
لإجبار الأجهزة على الإبلاغ عن عرضها الفعلي، تأكد من تمكين خيار إجبار الأجهزة على الإبلاغ عن العرض الفعلي.يتم إدراج الكود التالي في ملفك عند اختيار هذا الخيار.
<meta name="viewport" content="width=device-width">
انقر فوق OK.
اختر ملف استعلامات وسائط مختلف على مستوى الموقع
استخدم هذا الإجراء لتغيير ملف استعلامات الوسائط على مستوى الموقع الذي حددته في مربع حوار استعلامات الوسائط.
حدد Site > Manage Sites.
في مربع الحوار Manage Sites، حدد موقعك.
انقر فوق Edit. يتم عرض مربع الحوار Site Setup.
ضمن Advanced Settings في اللوحة اليسرى، حدد Local Info.
في ملف استعلام الوسائط على مستوى الموقع في اللوحة اليمنى، انقر فوق استعراض لتحديد ملف CSS لاستعلام الوسائط.
ملاحظة
تغيير ملف استعلامات الوسائط على مستوى الموقع لا يؤثر على المستندات المرتبطة بملف استعلام وسائط مختلف أو سابق على مستوى الموقع.
انقر فوق Save.
عرض صفحات الويب بناءً على استعلام الوسائط
تظهر الأبعاد المحددة في استعلام الوسائط في خيارات حجم زر/نافذة متعدد الشاشات.عند تحديد Dimension من القائمة، تظهر التغييرات التالية:
يتغير حجم العرض لتفعيل الأبعاد المحددة. لا يتغير حجم إطار المستند.
يتم استخدام ملف CSS المحدد في استعلام الوسائط لعرض الصفحة.
المزيد مثل هذا
قم بإنشاء مواقع ويب جميلة في Dreamweaver
قم بتصميم مواقع الويب الديناميكية وبرمجتها وإدارتها في أداة قوية متكاملة.
