Бул жерде CSS колдонуп жооп дизайн сүрөттөрдү кошуу үчүн бул кандай
Бүгүнкү күндө популярдуу сайттарды карап, бир дизайн дарылоо үчүн чоң, экран жүзжылдык өбөлгөлөрү сүрөттөрү көрүүгү ишенебиз. Бул сүрөттөлүштөрдү кошуу менен чакырыктардын бири мыкты тажрыйбага сайттары экран өлчөмү жана түзмөктөр менен жооп бериш керек, келип чыккан, - деп белгилүү болгон мамиле таасир дизайн .
экран өлчөмдөрүн менен сайттын жайгашуусу өзгөртүүлөр жана таразага тартып, ошондой эле ушул негизги сүрөттөрү жараша, алардын өлчөмүн азайтууну керек.
Негизи, бул "суюктук сүрөттөр" жооп сайттардын негизги даана (агуучу бир тармак жана медиа суроо менен бирге) бири болуп саналат. Бул үч даана башынан бери жооп желе жай үлгүсүнүн негизги болуп, бирок ал ар дайым аткарып, адилеттүү сайтка жооп сабындагы сүрөттөрдү кошуу үчүн жеңил (сызыктай сүрөттөр HTML белгилөө алкагында код жаткан сүрөттөр бар) болуп, ал эми жок өбөлгөлөрү сүрөттөрү (CSS негизги касиетин колдонуу бетине деп атай турган) менен бир эле көптөгөн интернет дизайнерлердин жана алдыңкы акырына карата иштеп олуттуу кыйынчылык берген. Бактыга жараша, CSS-жылы "маалымат-өлчөмү" менчик тышкары, мындай мүмкүнчүлүк болду.
Өзүнчө макалада, мен жаап CSS3 менчик маалымат-өлчөмүн кантип колдонууну Терезеде бата сүрөттөрдү сунуп, бирок ушул мүлк үчүн жайгаштырууну да жакшы, пайдалуу бир жол жок. Бул үчүн биз төмөндөгүдөй мүлк жана балл айкашын колдонот:
маалымат-өлчөмү: капкагын;
капкагын ачкыч мүлк карабастан терезе алат деп канчалык чоң же кичине, ал терезени туура сүрөттү Масштаб браузерди айтылат. Сүрөт Бүткүл экранды жабуу үчүн айтылып жатат, бирок ал баштапкы катышта жана өлчөм тепсеп сүрөт өзү алдын алуу, өзгөрүүсүз сакталат.
Сүрөт бүт терезе бети каптап, ошондуктан мүмкүн болушунча чоң терезе жайгаштырылган. Бул, сенин бир бош тактар же буркандын эч кандай бурмалоо жок, деп билдирет, бирок ошол эле сүрөттөлүштүн бир суроого экранында жана айкелдин тараптык катышына жараша чечип кесилиши мүмкүн деп билдирет. Мисалы, бир сүрөттөлүш (же жогору, ылдый, солго же укугу) четтери Сиз маалымат-орду мүлктү пайдалануу баалайт турган жараша, сүрөттөрдү кесип мүмкүн. Эгер сен "жогорку сол" артында багыт болсо, имиджине эч кандай ашыкча түбүн жана оң жагын чечип келет. Сиз маалымат сүрөттү бурабыз болсо, ашыкча бардык тараптардын жок болот, бирок ал ашыкча жайылып, себеби, ар бир жагына таасири азыраак кызмат болот.
маалымат-өлчөмүн кантип колдонсо болот: жабууга;
Сиздин маалымат образын түзүү, ал кыйла көп болгон бир сүрөттөлүш бир жакшы ой. браузерлердин браузер ал баштапкы көлөмүн караганда кичинекей бир өлчөмгө чейин бурканга тараза кийин, көрүү сапаты боюнча байкалаарлык таасири жок бир сүрөттөлүш аз болот, ал эми көрүнүш сапаты бүдөмүк жана Бүдөмүк болуп, кемсинтилген болот. Бул жагы сиздин бет бардык экрандардан ири сүрөттөрдү жеткирип жаткан кезде аткаруу чуу кылынат.
Муну аткарганда, тийиштүү текшерип Ылдамдыгы жана интернет жеткирүү үчүн ошол сүрөттөрдү даярдайт . Акыр-аягы, бир чоң жетиштүү сүрөттүн өлчөмүн жана сапатын жана көчүрүү ылдамдыгы боюнча акылга сыярлык билэ өлчөмүнүн ортосундагы бактылуу чөйрөнү табуу керек.
Бул барак кенен жана рабочий ЭЭМ же андан кичирээк боюнча карап жатат жана чөнтөк, мобилдик жиберип жаткан жокпу масштабдык өбөлгөлөрү буркандарды колдонуу үчүн жалпы бир жолу, ал сүрөттөлүш бир бетине толук билим алып келсе болот түзмөк.
желе аскер сиздин сүрөтүн жүктөп жана өбөлгөлөрү сүрөттөлүш катары сиздин CSS кошуу:
маалымат-сүрөт: нускага (фейерверк-башчы-wdw.jpg);
маалымат-кайра: жок-кайталоо;
маалымат-орду: борбору;
маалымат-тиркеме: белгиленген;
биринчи браузер жакка CSS кошуу:
-webkit-зат-көлөмү: капкагын;
-moz-зат-көлөмү: капкагын;
епо-зат-көлөмү: капкагын;
Анан CSS мүлктү толукталсын:
маалымат-өлчөмү: капкагын;
Колдонуу түрдүү сүрөттөлүш Бул жарагын ар кандай түзмөктөр
бир тактадан же ноутбук тажрыйбасы үчүн жооп дизайн маанилүү болсо да, Web кире аласыз түзмөктөргө ар бир кыйла өстү, жана экрандын өлчөмү көп түрдүүлүгү менен келет.
Мурда да айтылгандай, бир Мобилдик абдан чоң таасир өбөлгөлөрү сүрөтүн жүктөөдө, мисалы, натыйжалуу же өткөрмө-сезимдүү долбоор эмес да.
Сиз кантип колдонсо болорун билүү медиа суроо алар көрсөтүлө турган түзмөктөр туура болот сүрөттөрдү кызмат кылуу үчүн, жана андан ары мобилдик аппараттардын менен сайттын келүүсүн жакшыртуу.
Jennfier Krynin тарабынан Original макалада. Jeremy Джирард 9/12/17 тарабынан Edited