تجربة هذا الإصدار التجريبي
- لمعاينة الموقع الإلكتروني، انقر على عرض التطبيق، ثم انقر على
ملء الشاشة
. - أعِد تحميل التطبيق باستخدام أحجام متصفّح مختلفة. لاحظ مدى اختلاف الصور: فهي ليست بأحجام مختلفة فحسب، بل تختلف أيضًا في الاقتصاص ونِسب العرض إلى الارتفاع.
ما الذي يحدث هنا؟
التوجيه الفني يعرض صورًا مختلفة على أحجام شاشات مختلفة.
تحمّل الصورة المتجاوبة أحجامًا مختلفة من الصورة نفسها. يأخذ التوجيه الفني هذا خطوة إلى الأمام ويحمّل صورًا مختلفة تمامًا اعتمادًا على الشاشة.
استخدِم التوجيه الفني لتحسين العرض المرئي. على سبيل المثال، تضمن عمليات اقتصاص الصور المختلفة في هذا العرض التوضيحي أن تظهر النقطة محل الاهتمام (الزهرة) دائمًا بالتفصيل، بغض النظر عن الشاشة. تقتصر مزايا التوجيه الفني على الجانب الجمالي فقط، ولا يقدّم أي مزايا من حيث الأداء مقارنةً بالصور المتجاوبة.
عرض الرمز
- يمكنك الاطّلاع على
index.htmlلمعرفة رمز التوجيه الفني لهذا العرض التوضيحي.
طريقة عمل الرمز
يستخدم التوجيه الفني العلامات
<picture> و<source> و<img>.
picture
توفّر العلامة <picture> غلافًا لعلامة <source> واحدة أو أكثر أو لا توفّر أي غلاف، كما توفّر غلافًا لعلامة <image> واحدة.
المصدر
تحدّد علامة <source> مورد وسائط.
يستخدم المتصفّح أول علامة <source> مع استعلام عن الوسائط
يعرض القيمة "صحيح". في حال عدم تطابق أي من طلبات البحث عن الوسائط، يعود المتصفّح إلى تحميل الصورة المحدّدة في السمة <img>.
.
img
تتيح علامة <img> لهذا الرمز العمل على المتصفحات التي لا
تدعم علامة <picture>.
إذا كان المتصفّح لا يتيح استخدام العلامة <picture>، سيحمّل الصورة المحدّدة في العلامة <img>.