سلام به همه! ما متوجه شدیم که چیدمان تطبیقی ​​چیست، یک شبکه، و چگونه فونت ها را تطبیقی ​​کنیم. حال بیایید نحوه تطبیق تصاویر را بررسی کنیم.

این در واقع یک موضوع بسیار ساده است و زمان زیادی از ما نخواهد گرفت.

برای اینکه تصاویر خود را ریسپانسیو کنید، فقط باید ویژگی max-width=100% را به آنها اضافه کنید.

ایمگ (
حداکثر عرض: 100%؛
}

همه! اکنون تصویر ما فراتر از ظرف اصلی نخواهد بود و بسته به وضوح صفحه نمایش سازگار می شود.

به غیر از تصاویر، می توانید از این تکنیک برای فیلم ها و سایر فایل های رسانه ای استفاده کنید.

ایمگ، جاسازی، شیء، ویدیو (
حداکثر عرض: 100%؛
}

همه چیز خوب خواهد بود، اما این فقط در IE7+ کار می کند. اگر نیاز به پشتیبانی از IE6 دارید، این ویژگی در ورودی زیر کار می کند:

ایمگ (
عرض: 100%؛
}

آن ها به جای حداکثر عرض، عرض را بنویسید.

مشکل دیگری که ممکن است با آن مواجه شوید، مقیاس بندی ضعیف تصویر در ویندوز است. بله دقیقا در سیستم نه در مرورگر. اگر دقت کنید، می توانید برخی از آثار را ببینید.

حل این مشکل برای IE ساده است.

لوگو (
پس زمینه: هیچ
فیلتر: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}

آن ها ویژگی فیلتر به ما کمک می کند تا این مشکل را برطرف کنیم.

هنگامی که به شبکه پاسخگو دست یافتید، وقت آن است که به محتوای دیگر صفحه وب نگاه کنید که برای پاسخگو شدن نیاز به دستکاری دارد. ما در مورد تصاویر و فیلم ها صحبت می کنیم. اگر به سادگی یک تصویر را به یک صفحه وب اضافه کنید و پنجره مرورگر را کوچکتر کنید، خواهید دید که تصویر با عرض پنجره سازگار نیست، اما ابعاد اصلی خود را حفظ می کند. این ممکن است منجر به پیمایش افقی شود و همچنین ممکن است باعث شود که تصویر فراتر از ستون پاسخگو گسترش یابد:

چگونه با استفاده از CSS یک تصویر را واکنش گرا کنیم؟ ابتدا باید صفت عرض و ارتفاع را از تگ تصویر (در صورت وجود) حذف کنید. کد HTML شما نباید حاوی آنها باشد:

ورودی زیر را به شیوه نامه خود اضافه کنید:

Img (حداکثر عرض: 100%؛ )

این به این معنی است که حداکثر عرض برچسب است برابر عرض بلوک ظرفی خواهد بود که در آن قرار دارد. تصویر نمی تواند از والد خود فراتر برود و اگر عرض والدین تغییر کند، به طور خودکار با آن تنظیم می شود.

به همین ترتیب، می توانید عرض تصویر را به عنوان مثال، برابر با نصف عرض ظرف والد قرار دهید:

Img (حداکثر عرض: 50%؛ )

برای پاسخگو کردن تگ‌های، و، و، همان کد CSS را برای آنها اضافه کنید که برای تصاویر انجام می‌دهید. توصیه می شود همه انتخابگرها را یکجا فهرست کنید:

تصویر، ویدئو، جاسازی، شی (حداکثر عرض: 100%؛ )

اگر در حال جاسازی یک ویدیو با استفاده از . سپس روش فوق در اینجا کار نمی کند. شما باید به جاوا اسکریپت یا کدهای CSS هوشمندتر متوسل شوید.

اگر گزینه دوم را انتخاب کردید، باید برچسب را در یک ظرف اضافی قرار دهید. مثلا:

سپس کد CSS زیر را اضافه کنید:

ویدیو ( ارتفاع: 0؛ موقعیت: نسبی؛ بالشتک-پایین: 56.25٪؛ ) .iframe ویدیو (موقعیت: مطلق؛ سمت چپ: 0؛ بالا: 0؛ عرض: 100٪؛ ارتفاع: 100٪؛ )

همانطور که متوجه شدید، یک ویژگی padding-bottom در کد با مقدار عجیب 56.25٪ وجود دارد. این یعنی چی؟ مقدار padding-bottom که به صورت درصد مشخص شده است، نسبت به عرض بلوک محاسبه می شود. با تعیین نسبت تصویر تعبیه شده (16:9) و تقسیم عدد ضلع کوتاه بر عدد ضلع بلند و سپس ضرب کردن نتیجه در 100 عدد 56.25 را بدست آوردیم.

یکی از وظایف اصلی در طرح‌بندی تطبیقی، مقیاس‌بندی تصاویر (از جمله پس‌زمینه) است تا به درستی در دستگاه‌هایی با وضوح‌های مختلف صفحه نمایش داده شوند.

با تصاویر در تگ img، همه چیز ساده است: وقتی عرض را به صورت درصد تنظیم می کنید، ارتفاع به طور خودکار مقیاس می شود. این روش را نمی توان برای تصاویر پس زمینه اعمال کرد.

این ترفند این است که مقدار درصدی را برای padding عنصر تعیین کنید. این روش ابتدا در یک مقاله وبلاگ قدیمی A List Apart منتشر شد، اما هنوز به خوبی کار می کند.

فرض کنید یک تصویر پس زمینه 800 در 450 پیکسل دارید و می خواهید آن را به یک پس زمینه با نسبت تصویر ثابت 16:9 تبدیل کنید. کد زیر از px برای تورفتگی استفاده می کند، اما با em نیز کار می کند. یک عنصر شکل HTML5 نیز وجود دارد؛ برای اینکه در مرورگرهای قدیمی به درستی کار کند، می توانید از HTML5 shiv استفاده کنید.

Div.column ( حداکثر عرض: 800 پیکسل؛ ) figure.fixedratio ( padding-top: 56.25%؛ /* 450px/800px = 0.5625 */)

Div.column (/* تصویر پس‌زمینه باید 800 پیکسل عرض */ حداکثر عرض: 800 پیکسل؛ ) figure.fixedratio ( padding-top: 56.25%؛ /* 450px/800px = 0.5625 */ پس‌زمینه تصویر: url(http: //voormedia.com/examples/north-sea-regatta.jpg)؛ اندازه پس‌زمینه: جلد؛ -moz-background-size: جلد؛ /* فایرفاکس 3.6 */ موقعیت پس‌زمینه: مرکز؛ /* اینترنت اکسپلورر 7/ 8 */)

فرض کنید یک تصویر پس زمینه بزرگ دارید که روی دسکتاپ عالی به نظر می رسد. اما در یک دستگاه تلفن همراه بسیار کوچک خواهد بود، بنابراین راه حل مناسب کاهش عرض پس زمینه خواهد بود.

به عنوان مثال، یک تصویر با عرض 800 در 200 پیکسل (4:1) در یک صفحه نمایش کوچک، با عرض 300 پیکسل، باید به 150 پیکسل (2:1) کاهش یابد. بیایید ویژگی های ارتفاع و padding-top را بشماریم:

شکل نسبت تصویر پس زمینه را در عرض های مختلف نشان می دهد. شیب نمودار مربوط به ویژگی padding-top و ارتفاع شروع مربوط به ویژگی height است. کد حاصل این است:

Div.column ( /* تصویر پس‌زمینه باید 800 پیکسل عرض */ حداکثر عرض: 800 پیکسل؛ ) figure.fluidratio ( padding-top: 10%؛ /* شیب */ ارتفاع: 120 پیکسل؛ /* ارتفاع شروع */ پس‌زمینه- تصویر: url(http://voormedia.com/examples/amsterdam.jpg)؛ اندازه پس زمینه: جلد؛ -moz-background-size: جلد؛ /* فایرفاکس 3.6 */ پس زمینه: مرکز؛ /* اینترنت اکسپلورر 7/8 */ )

/* محاسبه نسبت سیال بر اساس دو بعد (عرض/ارتفاع) */ @mixin fluid-ratio($large-size, $small-size) ($width-large: nth($large-size, 1); $width -small: nth($small-size, 1)؛ $height-large: nth($large-size, 2)؛ $height-small: nth($small-size, 2)؛ $slope: ($height- بزرگ - $height-small) / ($width-large - $width-small)؛ $height: $height-small - $width-small * $slope؛ padding-top: $slope * 100%؛ ارتفاع: $height ؛ پس زمینه-اندازه: جلد؛ -moz-اندازه-پس زمینه: جلد؛ /* فایرفاکس 3.6 */ موقعیت پس زمینه: مرکز؛ /* اینترنت اکسپلورر 7/8 */ ) figure.fluidratio ( /* این عنصر دارای نسبت سیال خواهد بود از 4:1 در 800 پیکسل تا 2:1 در 300 پیکسل. */ @include fluid-ratio (800px 200px, 300px 150px)؛ پس زمینه-تصویر: url(http://voormedia.com/examples/amsterdam.jpg); )

هر طراح وب می‌داند که ایجاد یک طرح‌بندی واکنش‌گرا شاید یکی از سخت‌ترین کارهایی باشد که می‌تواند در کارش با آن روبرو شود. مشکل فقط این نیست که باید ویژگی های اندازه صفحه نمایش دستگاه های مختلف را در نظر گرفت و چیدمان بلوک ها را در سایت به گونه ای انتخاب کرد که پروژه وب هم در صفحه رایانه و هم در تلفن همراه زیبا به نظر برسد. تلفن، اما بسیاری از دستگاه های مدرن دارای مانیتورهای به اصطلاح "رتینا" با تراکم پیکسلی افزایش یافته هستند که دارای الزامات ویژه ای برای طرح بندی وب هستند.

واقعیت این است که صفحه نمایش های "رتینا" به دلیل تراکم مضاعف نقاط پیکسلی که تصاویر را تشکیل می دهند، وضوح بیشتری را ارائه می دهند. اما این بهبود جنبه‌های منفی خود را نیز دارد و مهم‌ترین آنها این است که اکنون لازم است تصاویر با وضوح بالا به طور خاص برای مانیتورهای شبکیه انتخاب شوند. راه حل های مختلفی برای دستیابی به وضوح تصویر بالا در دستگاه های معمولی و شبکیه وجود دارد. بیایید به چند نمونه نگاه کنیم.

اغلب در طراحی وب از همان تصویر با اندازه معین استفاده می شود که برای آن حداکثر اندازه نمایش روی صفحه نمایش داده می شود که دو یا چند برابر کوچکتر از اندازه اصلی آن است.

یک مثال ساده: فرض کنید می‌خواهید لوگوی 250×250 پیکسلی شما به درستی روی صفحه‌ای با تراکم پیکسلی دو برابر نمایش داده شود. در این حالت، باید یک تصویر لوگوی دیگری ایجاد کنید که دو برابر اندازه مورد نظر شما روی صفحه باشد، یعنی. 500 x 500 پیکسل.

اکنون باید مشکل اصلی را حل کنیم - چگونه مطمئن شویم که نمایش تصویر همیشه ثابت بماند، یعنی اندازه آن همیشه 250 x 250 پیکسل باشد؟

شاید کسی فوراً به این فکر افتاد که کد CSS ساده بنویسد، چیزی شبیه به این:

Img (حداکثر عرض: 250 پیکسل؛ )

به اندازه کافی عجیب، این روش کار نخواهد کرد. شما باید اندازه ظرف حاوی تصویر را محدود کنید، نه خود تصویر را. باید چیزی شبیه این باشد:

Div img (حداکثر عرض: 250 پیکسل؛ )

معایب این روش چیست؟

اگر از این روش چیدمان برای تصاویر کوچک مانند لوگو یا آیکون استفاده کنید، به احتمال زیاد با مشکلی مواجه نخواهید شد. با این حال، این روش برای تصاویر بزرگ مناسب نیست. آیا دوست ندارید تصاویر عظیمی را به طور خاص برای دستگاه های شبکیه که حتی قادر به نمایش تمام جزئیات تصویر شما نیستند، دانلود کنید؟!

به بازدیدکنندگان وب سایت خود فکر کنید. به شخصی که عجله دارد اطلاعات مهم منبع وب شما را بخواند و از طریق یک مودم USB که سیگنال ارتباطی را به خوبی دریافت نمی کند وصل می شود، چه می گویید؟ البته، اگر به نحوه درست ایجاد یک طراحی واکنش گرا برای وب سایت خود فکر نکنید، ممکن است بخش خاصی از مخاطبان خود را از دست بدهید.

به هر حال، اگر می خواهید کمی طراحی سایت را بسته به سرعت اتصال در سمت مشتری تغییر دهید، می توانید از ابزار ویژه Foresight.js از Adam Bradley استفاده کنید که سرعت بارگذاری یک تصویر 50K را اندازه می گیرد.

یکی دیگر از معایب روش این است که نسبت صفحه نمایشگر معمولی و صفحه نمایش تلفن همراه متفاوت است. بنابراین، تصویر پس‌زمینه‌ای که به صورت افقی کشیده می‌شود، زمانی که برای اندازه‌گیری عرض صفحه در تلفن همراه کوچک شود، بسیار عجیب به نظر می‌رسد و فضای خالی زیادی در پایین باقی می‌ماند. در مورد تلفن همراه، بهتر است مدیر وب سایت این امکان را داشته باشد که تصویر را بزرگ کرده، قسمت قابل توجهی از آن را برجسته کند و این قطعه از تصویر را به جای کل تصویر به عنوان پس زمینه قرار دهد.

اما تعداد زیادی گزینه وجود دارد که به شما امکان می دهد بدون بارگذاری بیش از حد کانال ارتباطی یا کند کردن عملکرد دستگاه بازدید کننده سایت، تصاویر را با وضوح صفحه تطبیق دهید.

اکثر این روش ها بر ترکیبی از اسکریپت های اجرا شده در سمت کلاینت و سرور متکی هستند. اولین مورد که با جاوا اسکریپت نوشته شده است، همه چیز را در مورد ویژگی های دستگاه مورد استفاده بازدید کننده سایت و سرعت اتصال به اینترنت می آموزد، دومی می تواند بسته به اطلاعات دریافتی تصویری با کیفیت مورد نیاز بارگذاری کند.

توسعه دهندگان مدرن تعداد نسبتاً زیادی اسکریپت ایجاد کرده اند که عملکردهای مشابهی را انجام می دهند. به عنوان مثال، اسکریپت ویژه Jquery HiSRC است که توسط مارک گرابانسکی و کریستوفر اشمیت توسعه یافته است، که به شما امکان می دهد بسته به نوع دستگاه کاربر و سرعت اتصال به اینترنت، یک گزینه از سه گزینه را برای هر تصویر دانلود کنید.

به طور کلی، نشانه گذاری HTML برای این اسکریپت به صورت زیر است:

در ویژگی src باید مسیر فایلی را که ابتدا با تصویر بارگذاری می شود مشخص کنید، معمولاً با کمترین کیفیت. پس از بارگیری صفحه، اسکریپت سرعت اتصال به اینترنت و نوع صفحه نمایش دستگاهی را که بازدیدکننده از آن به سایت دسترسی داشته است، بررسی می کند. اگر سرعت اینترنت اجازه دهد و دستگاه از تصاویر "رتینا" پشتیبانی کند، تصویر واقع در آدرس مشخص شده در ویژگی data-2x بارگیری می شود، اگر دستگاه از تصاویر معمولی پشتیبانی می کند، تصویر در آدرس موجود در داده بارگیری می شود. ویژگی 1x و در صورتی که اجازه سرعت اینترنت را ندهد، هیچ تغییری ایجاد نخواهد شد. یک کلاس ویژه اضافه شده به یک تصویر به اسکریپت می گوید که باید تغییرات خاصی روی آن عنصر DOM انجام شود.

خود اسکریپت با اضافه کردن کد متصل می شود:

$(document).ready(function())($(.hisrc").hisrc(); ));

همه چیز بسیار ساده است و نیازی به دردسر اضافی ندارد. تنها کاری که باید انجام دهید این است که سه تصویر مختلف را برای بارگذاری در موقعیت های مختلف انتخاب کنید و سایت شما آماده کار خواهد بود. می توانید یک نسخه جداگانه از تصویر با نسبت های تغییر یافته به طور خاص برای دستگاه های تلفن همراه ایجاد کنید.

این روش همچنین دارای معایبی است. ابتدا باید کتابخانه Jquery را نیز اضافه کنید. ثانیاً، این روش به نشانه گذاری HTML خاصی نیاز دارد که ممکن است برای همه استادان وب مناسب نباشد، زیرا در برخی موارد نحوه نمایش تگ - قابل تغییر نیست.

یک راه جالب برای ایجاد تصاویر تطبیقی ​​توسط سرویس Sencha.io Src ارائه شده است (در زمان نوشتن این مقاله هنوز کار می کند) که به هیچ وجه نیازی به تنظیمات روی سرور ندارد. این سرویس بر اساس پروکسی کار می کند.

فقط پیشوند http://src.sencha.io/ را قبل از آدرس تصویر خود در ویژگی src وارد کنید و Sencha.io Src بقیه موارد را انجام خواهد داد. این یک سرویس رایگان است که به شما امکان می دهد تا بیشتر مشکلات یک طراح وب مدرن را حل کنید.

از معایب این سرویس می توان به این واقعیت اشاره کرد که با استفاده از آن، خود را به عملکرد یک منبع شخص ثالث وابسته می کنید؛ هر گونه خرابی در عملکرد آن بر سایت شما تأثیر می گذارد، بنابراین استفاده از آن را توصیه نمی کنم، و نه تنها آن، اما هر شخص ثالث در خدمات عمومی.

همانطور که می بینید، واقعاً راه های جایگزینی برای تهیه تصاویر واکنش گرا برای وب سایت ها وجود دارد. این مقاله تمام روش های موجود برای کاربران مدرن را فهرست نکرده است. تعداد سرویس‌ها و افزونه‌هایی که به شما امکان می‌دهند وضوح تصویر را بسته به ویژگی‌های دستگاه‌هایی که وب‌سایت در آنها مشاهده می‌شود کنترل کنید، هر روز در حال افزایش است. استادان وب چاره ای ندارند جز اینکه هر یک از آنها را آزمایش کنند و بسته به وظایفی که با آن روبرو هستند، یک یا روش دیگری را انتخاب کنند.

مشکل تصاویر تطبیقی ​​کاملاً مرتبط است، بنابراین من با کمی استدلال و روش‌های پیاده‌سازی شروع می‌کنم و سپس گزینه‌ای را که به نظر من مناسب‌تر است، برجسته می‌کنم.

بنابراین، حدود یک سال پیش فکر کردم که برای اینکه یک تصویر واکنش‌گرا باشد (یعنی کشیده یا کوچک شود تا متناسب با عرض ظرف باشد)، تنها کاری که باید انجام دهید این است که از کد زیر استفاده کنید:

Wrapper img (عرض: 100%؛ )

و در واقع، در برخی موارد این می تواند محدود شود. این ترفند زمانی که پنجره مرورگر کوچکتر می شود عالی عمل می کند. اما اگر عرض ظرفی که تصویر در آن قرار دارد بزرگتر از وضوح تصویر شود چه؟ درست. تصویر در عرض ظرف کشیده می شود، اما کیفیت آن چیزهای زیادی را برای دلخواه باقی می گذارد. اما اگر نیاز به پشتیبانی برای رزولوشن 2048 x 1536 پیکسل دارید، چه؟

اگر از svg استفاده نمی کنید و این یک تصویر شطرنجی است، اولین چیزی که به ذهن می رسد این است که عکسی بگیرید که با حداکثر وضوح صفحه فرود مطابقت داشته باشد و وقتی پنجره مرورگر را تغییر اندازه می دهید، با فشرده سازی کیفیت معمولی

و سپس مشکل عملکرد بوجود می آید. برای یک گوشی هوشمند احمقانه است که تصاویر بزرگی را بارگذاری کند که در وضوح شبکیه چشم خوب به نظر می رسند. از این گذشته، سرعت شبکه های تلفن همراه به اندازه رایانه شخصی نیست و برخی از کاربران ممکن است منتظر بارگذاری صفحه فرود روی تلفن هوشمند خود نباشند. نتیجه یک مشتری از دست رفته است.

می توانید سعی کنید چندین div را با تصاویر تعریف کنید و سپس با استفاده از پرس و جوهای رسانه ای، موارد غیر ضروری را پنهان کنید و فقط تصویری را نشان دهید که با وضوح فعلی مطابقت دارد.

به نظر می رسد که مشکل حل شده است. اما واقعیت این است که مرورگرها برای سرعت بخشیدن به نمایش صفحه، تصاویری را که در html نوشته شده اند، قبل از شروع پردازش css بارگذاری می کنند. شاید من خودم را کاملاً درست بیان نکردم (مرا تصحیح کنید)، اما اگر این ترفند را انجام دهید، بدون توجه به آنچه در css نوشته شده است، تمام تصاویر همچنان بارگذاری می شوند. این بدان معناست که ما فقط وضعیت را برای دستگاه های تلفن همراه بدتر کرده ایم. اکنون آنها باید نه یک، بلکه چندین تصویر را آپلود کنند.

می‌توانید با باز کردن ابزار توسعه‌دهنده و نگاه کردن به برگه «شبکه» این موضوع را تأیید کنید.

به طور کلی، هنوز مشکلات زیادی در هنگام ایجاد تصاویر تطبیقی ​​وجود دارد. و راه حل های زیادی نیز جمع آوری شده است. همه چیز به موقعیت خاص بستگی دارد.

در html 5، برچسب تصویر ظاهر شد که به شما امکان می دهد اکثر مشکلات را حل کنید و به طور خاص برای ایجاد یک طراحی تطبیقی ​​(پاسخگو) ایجاد شده است. طراحی آن یادآور تگ های ویدئویی و صوتی است. ماهیت کار این است که چندین تصویر در داخل برچسب تصویر برای وضوح صفحه نمایش مشخص شده است. چیزی شبیه این به نظر می رسد:

ویژگی این است که به جای src از srcset استفاده می شود و چیزی شبیه به پرس و جوهای رسانه ای استفاده می شود. یک تصویر کوچک با وضوح کمتر از 319 پیکسل بارگذاری می شود. تصویر متوسط ​​با وضوح 320 پیکسل تا 480 پیکسل و غیره.

به طور کلی، هنگام استفاده از برچسب های جدید، توصیه می کنم به این سایت نگاه کنید و وضعیت فعلی را بررسی کنید.

همانطور که می بینید، وضعیت در حال حاضر چیزهای زیادی برای دلخواه باقی می گذارد. هیچ پشتیبانی در دستگاه‌های IOS، مک‌بوک(ها) و اینترنت اکسپلورر وجود ندارد (اگرچه، کاربران اینترنت اکسپلورر برای آنها متاسف نیستند، اما باید رنج ببرند). من فکر می کنم که همه ما حاضر نیستیم این همه کاربر را از دست دهیم. نه من اشتباه بیان کردم آن را از دست ندهید، زیرا تصویر اصلی ما به درستی بارگیری و نمایش داده می شود. اما با این وجود، من دوست دارم مشتریان خود را با فناوری اپل به دلیل زمان بارگذاری طولانی صفحه از دست ندهم، زیرا به احتمال زیاد این یک مخاطب حلال است.

برای اینکه اکنون از این تگ استفاده کنید، باید از یک اسکریپت کوچک (بین تگ های head) picturefill.js استفاده کنید.

اکنون همه دستگاه‌ها باید از این ساختار برای طرح‌بندی تصاویر تطبیقی ​​پشتیبانی کنند. درست است، من آن را روی مک تست نکرده ام (هنوز آن را ندارم).

برخلاف روشی که در بالا توضیح داده شد، اکنون فقط یک تصویر بارگذاری شده است و نه سه تصویر، همانطور که قبلا بود.