“, и как различните дизайни прилагат този термин и технология. Сега, след като видяхме някои примери за внедрявания в действие, нека се опитаме да проектираме наш собствен адаптивен уебсайт!

В днешния ни урок ще ви разкажем за разработването на структурата на началната страница и добавянето на функционалност за медийни заявки към нея, което ще ни помогне да ускорим зареждането на уебсайта, да улесним процеса на навигация за потребителите и също, което е важно , ни помагат да поддържаме спретнат и атрактивен дизайн, когато посещаваме сайта от различни устройства, като мобилни устройства, различни операционни системи и при различни резолюции на екрана.

Преди да преминем към процеса на кодиране на HTML, нека първо се справим с мета тага "viewport". Устройствата iPhone и iPod Touch на Apple са програмирани да мащабират автоматично уебсайтове във версията на iOS на браузъра Safari.

Тази технология позволява показването на целия уебсайт на екрана, но той ще бъде в по-малка форма. Тъй като ще използваме медийни заявки специално за адаптиране на дизайна към различни размери на екрана, нямаме нужда от автоматичното мащабиране, предоставено от устройствата на Apple. Мета тагът на прозореца за изглед също ще ви позволи да зададете опции за това колко потребителят може да увеличава или намалява вашия сайт. Но основното тук е възможността да зададете първоначалния мащаб, в който ще се отваря сайтът. По-конкретно, в днешното ни ръководство ви препоръчваме да показвате сайта си без изобщо да мащабирате.

Когато започнете да работите с HTML, вероятно ще забележите, че документът се състои от доста прости HTML5 елементи, с изключение на мета тага viewport и нашия div с основния фон.

След като приключим с работата по HTML, нека създадем файл с каскадни стилови таблици (CSS). Препоръчваме ви да използвате нулиране на CSS, за да предотвратите нежелани полета, подложки или рамки. Просто използвайте този кодов фрагмент във вашите CSS файлове.

Тяло, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt,
blockquote, fieldset, legend, label, input, textarea (
марж: 0; подплата: 0; граница: 0;
}
sh1, h2, h3, h4, h5, h6, p (
поле: 0 0 1em 0;
}
h1(размер на шрифта: 200%;)
h2(размер на шрифта: 170%;)
h3(размер на шрифта: 160%;)
h4(размер на шрифта: 140%;)
h5 (размер на шрифта: 120%;)
Сега, тъй като разработваме от нулата, можете да отворите етикета body и да добавите стилове там. Задаваме цвета на фона на бяло и цвета на текста на тъмно сиво. Комбинацията от черен текст върху бял фон често създава усещане за прекомерен контраст, а за много посетители предизвиква заслепяване в очите.

Html, тяло (височина: 100%;)
Също така имайте предвид, че размерът на шрифта е в em единици и това е един от най-важните елементи при разработването на адаптивен дизайн, тъй като размерът на тази единица се основава на процент. Ако зададете размера на шрифта в размери в пиксели, той няма да съответства на останалата част от дизайна, ако сайтът е намален, за да се показва правилно на по-малки екрани. Буквите или ще заемат целия екран, или ще се припокриват, а това е напълно грозно.

Можем също да добавим стил към нашия клас .homeContent и към #mainBG id. Дефинирахме височината на страницата, зададохме ширината на 100% и центрирахме съдържанието в класа .homeContent. ID #mainBG ще отговаря за фоновото изображение, което в нашия пример е стоково изображение, получено от автора. Задаваме и размера на фона за покриване, който ще разтегне изображението, за да запълни целия екран и ще позволи на нашето фоново изображение да поддържа правилните пропорции, когато се показва на екрани с по-висока разделителна способност. Размерът на нашето фоново изображение "big.jpg" е 1920x1189.

Домашно съдържание (
височина: 100%;
ширина: 100%;
позиция: роднина;
марж: 0 авто;
}

#mainBG (
фон: url(images/big.jpg) превъртане без повторение;
фонова позиция: център;
размер на фона: корица;
-moz-background-size: корица;
-o-background-size: корица;
}
Сега, след като приключихме с основите, нека внедрим медийни заявки. Първите две заявки ще бъдат за таблетни компютри. С помощта на тези заявки ще можем да заредим фоново изображение със среден размер, тъй като зареждането на голямо изображение може да отнеме време и честотна лента и ако не се нуждаем от изображение, което е два пъти по-голямо от размера на екрана, тогава не трябва да го заредите. Размерът на нашето фоново изображение "medium.jpg" е 1024x770 пиксела. Също така трябва да го позиционираме по такъв начин, че да се показва правилно на всички видове таблети.

@media only екран и (максимална ширина: 1024px) и (ориентация: пейзаж) (
#mainBG ( фон: url(images/medium.jpg) 50% 0 превъртане без повторение !важно;
фонова позиция: център;
размер на фона: корица;
-webkit-background-size: корица;
-moz-background-size: корица;
-o-background-size: корица;
}
}
екран само за @media и (мин. ширина: 768px) и (максимална ширина: 991px) (
#mainBG ( фон: url(images/medium.jpg) 50% 80% превъртане без повторение !важно;
фонова позиция: център;
размер на фона: корица;
-webkit-background-size: корица;
-moz-background-size: корица;
-o-background-size: корица;
}
}
Последното запитване ще бъде за мобилни телефони. Чрез тази заявка ще покажем нашето фоново изображение, наречено “small.jpg”, чиито размери са 767x475.

екран само за @media и (мин. ширина: 0px) и (максимална ширина: 767px) (
#mainBG ( фон: url(images/small.jpg) 75% 80% превъртане без повторение !важно;
фонова позиция: център;
размер на фона: корица;
-webkit-background-size: корица;
-moz-background-size: корица;
-o-background-size: корица;
}
}
Визуализирайте извършената работа в браузъра. Отворете своя шедьовър първо на цял екран и след това постепенно намалете прозореца за гледане. Ще видите, че изображението веднага започва да се променя по размер. Опитайте се да определите в каква позиция се активират медийните заявки и размерът на изображението се променя.

От автора:В този урок ще разгледаме проста техника за създаване на фоново изображение, което ще се простира по цялата ширина на прозореца за изглед на браузъра. За да направим това, имаме нужда от CSS свойството background-size; Не е необходим JavaScript.

Примери за адаптивни целочислени фонови изображения

В днешно време стана доста популярно да се използва огромна снимка като фон, който заема цялата уеб страница. Ето примери за няколко сайта, които имат адаптивни цели фонови изображения:

Ако искате да постигнете подобен резултат в следващия си уеб проект, тогава тази статия е това, от което се нуждаете.

Основни принципи

Ето нашия план за действие.

Използвайте свойството background-size, за да запълните напълно прозореца за изглед

Свойството CSS за фонов размер е настроено да покрива. Стойността на покритието казва на браузъра автоматично и пропорционално да мащабира ширината и височината на фоновото изображение, така че винаги да е равно или по-голямо от ширината/височината на прозореца за изглед.

Използвайте медийна заявка, за да обработвате малки фонови изображения за мобилни устройства

За да подобрим скоростта на зареждане на страницата на малки екрани, ще използваме медийна заявка, за да обработим по-малка версия на нашето фоново изображение. Не е задължително. Тази техника ще работи и без него. Но защо използването на малко фоново изображение за мобилни устройства е добра идея?

Изображението, което използвах в демонстрацията, е с разделителна способност 5500x3600px. Тази разделителна способност е достатъчна за повечето широкоекранни компютърни монитори, налични в момента на пазара. Но за това ще трябва да обработите файл с размер 1,7 MB.

Това огромно допълнително натоварване само заради публикуването на фонова снимка така или иначе няма да помогне. И, разбира се, това ще се отрази изключително зле на връзките, използващи мобилен интернет. Тази резолюция също е прекомерна за устройства с малки екрани (ще разгледаме това по-подробно по-късно). Нека да разгледаме целия процес.

HTML

Всичко, от което се нуждаете за маркиране, е това:

Ще присвоим фоново изображение на елемента body, така че изображението винаги да запълва целия прозорец на браузъра.

Тази техника обаче ще работи и за всеки блоков елемент (като div или форма). Ако ширината и височината на вашия блоков елемент са плавни, тогава фоновото изображение винаги ще се мащабира, за да запълни целия контейнер.

CSS

Задайте следните стилове за елемента body:

body ( /* Път до изображението */ background-image: url(images/background-photo.jpg); /* Фоновото изображение винаги е центрирано вертикално и хоризонтално */ background-position: center center; /* Фоновото изображение не се повтаря * / background-repeat: no-repeat; /* Фоновото изображение е фиксирано в прозореца за изглед, така че не се движи, когато височината на съдържанието е по-голяма от височината на изображението */ background-attachment: фиксирано; /* Това е, което позволява на фоновото изображение да се приспособи към размера на контейнера */ background-size: cover; /* Задава цвета на фона, който ще се показва, докато фоновото изображение се зарежда */ background-color: #464646; )

тяло( /* Път до изображение */ фон - изображение : url (изображения / фон - снимка . jpg ) ; /* Фоновото изображение винаги е центрирано вертикално и хоризонтално */ /* Фоновото изображение не се повтаря */ фоново повторение: без повторение; /* Фоновото изображение е фиксирано в прозореца за изглед, така че да не се движи, когато височината на съдържанието е по-голяма от височината на изображението */ /* Това е, което позволява на фоновото изображение да се приспособи към размера на контейнера */ фон - размер : корица ; /* Задава цвета на фона, който ще се показва, докато фоновото изображение се зарежда */ фон - цвят : #464646;

Най-важната двойка свойство/стойност, на която трябва да обърнете внимание, е:

размер на фона: корица;

фон - размер : корица ;

Тук започва магията. Тази двойка свойство/стойност казва на браузъра да мащабира пропорционално фоновото изображение, т.е. така че ширината и височината му да са равни или по-големи от ширината/височината на елемента (в нашия случай елементът body).

Има обаче един проблем с тази двойка свойство/стойност: ако фоновото изображение е по-малко от елемента body - което ще се случи на екрани с висока разделителна способност и/или когато имате огромно количество съдържание на страницата - браузърът ще неизбежно увеличават мащаба на изображението. И както знаем, когато увеличим размера на растерно изображение, качеството на изображението намалява (с други думи, възниква пикселизация).

Увеличаването на размера на изображението от оригиналния му размер влияе върху качеството на изображението. Имайте това предвид, когато избирате правилното изображение. Демото използва огромна снимка с размери 5500x3600px за широкоекранни монитори, така че ще е необходим много голям екран, за да пострада качеството. Да продължим. За да гарантираме, че фоновото изображение винаги е центрирано в прозореца за изглед, ще напишем:

позиция на фона: център център;

фонова позиция: център център;

Този запис поставя фона върху координатната ос в центъра на прозореца за изглед. След това трябва да дефинираме какво се случва, когато височината на съдържанието надвиши видимата височина на прозореца за изглед. Когато това се случи, се появява лента за превъртане.

В този случай трябва да гарантираме, че фоновото изображение остава в първоначалната си позиция, дори когато потребителят превърта страницата надолу. В тази ситуация изображението или просто ще свърши при превъртане, или ще се премести, докато превъртането напредва (което може да бъде много разсейващо за потребителя). За да коригираме фона, задаваме свойството background-attachment на fixed.

фоново прикачване: фиксирано;

фон - прикачен файл: фиксиран;

В демонстрацията добавих опция за „зареждане на съдържание“, за да можете да видите какво се случва, когато в браузъра се появи лента за превъртане, когато свойството за прикачен файл на фона е зададено на фиксирано. Можете също така да изтеглите демонстрацията и да си поиграете със стойностите на свойството за позициониране (като background-attachment и background-position), за да видите как се отразява на превъртането на страницата и фоновото изображение. Останалите стойности на имотите са доста ясни.

CSS стенограма

Описах подробно свойствата на фона, за да ги направя по-лесни за обяснение. Съкратената форма също ще бъде еквивалентна:

тяло ( фон: url(background-photo.jpg) център централна корица без повторение фиксирано; )

тяло( фон: url (фон - снимка. jpg) център централна корица не - фиксирано повторение;

Всичко, което трябва да направите, е да промените стойността на url, за да сочи към вашето фоново изображение.

По избор: Медийно запитване за малки екрани

За по-малки екрани използвах Photoshop, за да намаля пропорционално оригиналното фоново изображение до 768x505px, а също така използвах Smush.it, за да намаля още малко размера. Благодарение на това размерът на файла намаля от 1741KB на 114KB. Тези. размерът на изображението е намален с 93%.

Моля, не ме разбирайте погрешно, 114KB все още са доста за чисто естетически елемент на дизайна. Като се има предвид допълнителното натоварване от 114KB, бих използвал такъв файл само ако видя възможност за значително подобряване на потребителското изживяване (UX) на сайта, защото... В момента значителен дял от интернет трафика идва от работата на мобилни устройства background - image: url (images / background - photo - mobile - devices. jpg);

Медийната заявка има ограничение на ширината от max-width: 767px, което означава, че ако прозорецът на браузъра е по-голям от 767px, ще се зареди голямо фоново изображение.

Недостатъкът на използването на тази медийна заявка е, че ако промените ширината на прозореца на браузъра си от например 1200px на 640px (или обратното), веднага ще видите момента, в който се зарежда малко или голямо фоново изображение.

Освен това, тъй като някои устройства с малък екран могат да показват повече пиксели - например iPhone 5 с ретина дисплей може да показва разделителна способност от 1136x640px - малкото фоново изображение ще бъде пикселизирано.

Обобщаване

Можете да видите по-актуална версия на изходния код в този урок в GitHub. Мога да ви предупредя само за едно нещо: моля, използвайте тази техника с повишено внимание, защото големите файлове могат сериозно да повредят UX, особено ако крайният потребител използва бавна и ненадеждна интернет връзка. Това е още една причина, поради която трябва да изберете подходящ цвят на фона, така че потребителят да може да чете съдържанието, докато фоновото изображение се зарежда.

Вече писах, че такъв елемент на сайта като фоново изображение вече е често срещан. Най-често се намира на страниците за продажби, където се намира в хедъра. Изглежда много красиво, ако, разбира се, е с много високо качество и пасва добре на темата на сайта. Между другото, като бонус в тази статия, в края ще ви кажа къде да получите висококачествени изображения безплатно и в същото време те ще бъдат направени от професионалисти.

Ето какво още има за адаптивните изображения на уебсайтове:

Ако искате да направите вашия фон наистина уникален, тогава препоръчвам следната статия:

Вижте как изглежда това в реален пример:

Изтегли

По-долу можете да видите как фоновото изображение се адаптира към различни устройства:

Как да направите адаптивно фоново изображение за уебсайт?

HTML част

За този пример ще зададем фоново изображение за тяло, но можете да го направите по подобен начин за всеки блок на страницата. Следователно в HTML структурата няма нищо свръхестествено:

CSS част

Остава само да зададем необходимите свойства в стиловия файл, за да направим това, което възнамерявахме - адаптивно фоново изображение за сайта:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

тяло ( /* Път до изображението спрямо този файл */фоново изображение: url ( ../images/background-photo.jpg) ; /* Винаги центрирайте изображението вертикално и хоризонтално */позиция на фона: център център; /* Деактивиране на повтарянето на изображението */фоново повторение: без повторение; /* Коригирайте изображението - то остава на мястото си при превъртане на прозореца */фоново прикачване: фиксирано; /* Изображението ще бъде мащабирано в зависимост от размера на контейнера */размер на фона: корица; /* Цветът на фона на изображението, който ще се показва, докато изображението се зареди */цвят на фона: #464646; /* Еквивалентна стенограма * фон: url(background-photo.jpg) централна централна корица без повторение фиксирана; */ }

Всички редове са коментирани, така че не мисля, че ще има проблеми с този код.

Но това не е целият код. Тъй като скоростта на мобилния интернет е ограничена, трябва да оптимизираме страницата за скорост на зареждане. На страницата има изображение, което е доста голямо. Но можете да направите така, че за мобилни устройства да се зарежда различно изображение, което е по-малко.

Ще използваме Media Queries, които ви позволяват да зададете индивидуални свойства за произволна ширина на екрана:

какво направихме Ако ширината на прозореца на браузъра на устройството е по-малка от 767 пиксела, тогава ще използваме различно изображение. Всичко е много просто.

Една от основните задачи при адаптивното оформление е мащабирането на изображения (включително фонови), така че да се показват правилно на устройства с различни разделителни способности на екрана.

Със снимки в етикета imgПросто е: когато зададете ширината като процент, височината ще се мащабира автоматично. Този метод не може да се приложи към фонови изображения.

Този трик е да зададете процентната стойност на подплънките ( подплата) елемент. Методът е публикуван за първи път в стара статия в блога A List Apart, но все още работи добре.

Да приемем, че имате фоново изображение от 800 на 450 пиксела и искате да го направите фон с фиксирано съотношение на страните 16:9. Кодът по-долу използва за отстъп px, но всичко ще работи с ем. Има и фигурен елемент HTML5; за да работи правилно в по-стари браузъри, можете да използвате HTML5 shiv.

Div.column ( max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ )

Добавяне на фон

Полученият елемент се мащабира според очакванията, но ако добавите фоново изображение, резултатът няма да е много добър. Използване на атрибута размер на фона: корица. За съжаление, този метод не работи в Internet Explorer 8. За да разрешим този проблем, позиционираме фона с помощта на позиция на фона. Фоновото изображение трябва да е поне толкова широко, колкото максимална ширинаелемент. В противен случай картината ще бъде изрязана.

Div.column ( /* Фоновото изображение трябва да е широко 800px */ max-width: 800px; ) figure.fixedratio ( padding-top: 56,25%; /* 450px/800px = 0,5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/ 8 */ )

Да приемем, че имате голямо фоново изображение, което изглежда страхотно на работния плот. Но на мобилно устройство ще бъде твърде малък, така че правилното решение би било да се намали ширината на фона.

Например изображение с ширина 800 на 200 пиксела (4:1) на малък екран с ширина 300 пиксела трябва да бъде намалено до 150 пиксела (2:1). Нека преброим атрибутите височинаИ подложка-отгоре:

Фигурата показва пропорциите на фоновото изображение при различни ширини. Наклонът на графиката съответства на атрибута подложка-отгоре, начална височина - към атрибута височина. Полученият код е:

Div.column ( /* Фоновото изображение трябва да е широко 800px */ max-width: 800px; ) figure.fluidratio ( padding-top: 10%; /* наклон */ височина: 120px; /* начална височина */ background- изображение: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ )

Използване на SCSS за изчисление

Атрибути подложка-отгореи височинаможе да се изчисли автоматично с помощта на препроцесори като SCSS. Пример за това:

/* Изчисляване на съотношението на течността въз основа на две измерения (ширина/височина) */ @mixin fluid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -малък: 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: $height ; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* Този елемент ще има флуидно съотношение от 4:1 при 800px до 2:1 при 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); )

Ако адаптирате фона на сайта с помощта на CSS стилове, тогава неговата функция ще бъде да се гледа изцяло на монитора и тук не е необходим JavaScript. Тъй като, според статистиката, на широко гледани и популярни интернет ресурси, където фоновото изображение се използва на пълна ширина.

Също така трябва да вземете предвид детайлите на дизайна, когато адаптирате, това са бутони или икони, които няма да се показват правилно на мобилни устройства и са предназначени за тази цел, които ще бъдат премахнати по размер и можете да изградите дизайна според нуждите си, и правилно казано, за удобство на потребителя, който може да бъде достъпен от мобилни устройства и там вече всичко е оформено според нуждите.

Като начало ще ни трябват две фонови изображения, като първото изображение трябва да е поне широкоекранен 1920*1080, с това постигаме покритие на цялата зрителна площ на повечето широкоекранни монитори, произвеждани в момента.

Второто изображение ще бъде по-малка версия на първото фоново изображение, но само за мобилни устройства. Да кажем, че тези изображения ще имат разделителна способност 1920*1080 и 768*480.
Второто изображение е за намаляване на времето за зареждане на страницата при малки резолюции на екрана и за това ще използваме медийна заявка, за да получим по-малка версия на фоновото изображение, въпреки че всичко работи добре и без него.
Няма да ви уча как да редактирате фонови изображения и да намалите теглото им; Сигурен съм, че всеки има отметки с такива услуги или знае как да работи с Photoshop.

Е, самият код, изходният код е изтеглен от чужд сайт, но не е трудно за разбиране, въпреки че коментарите са на английски, не съм ги изтрил, за да стане по-ясно:
CSS:

200?"200px":""+(this.scrollHeight+5)+"px");">
тяло(
/* Местоположение на изображението */
фоново изображение: url(images/background-photo.jpg);

/* Изображението е центрирано вертикално и хоризонтално през цялото време */
позиция на фона: център център;

/* Изображението не се повтаря */
фоново повторение: без повторение;

/* Прави изображението фиксирано в прозореца за изглед, така че да не се движи, когато
височината на съдържанието е по-голяма от височината на изображението */
фоново прикачване: фиксирано;

/* Това прави фоновото изображение премащабирано въз основа на размера на неговия контейнер */
размер на фона: корица;

/* Изберете плътен фонов цвят, който ще се показва, докато фоновото изображение се зарежда */
цвят на фона:#464646;

/* СКЪРОТО CSS НОТАЦИЯ
* фон: url(background-photo.jpg) централна централна корица без повторение;
*/
}

/* За мобилни устройства */
екран само за @media и (максимална ширина: 767px) (
тяло(
/* Размерът на файла на това фоново изображение е 93% по-малък
* за подобряване на скоростта на зареждане на страницата при мобилни интернет връзки */
фоново изображение: url(images/background-photo-mobile-devices.jpg);
}
}