А отзивчиво оформление се превърна в норма в уеб дизайна, този тип оформление на страница означава, че ако прозорецът, който го съдържа, променя рязко размера си, тоест от много голям до много малък и обратно, нашите елементи трябва да са в състояние да пренареждат, за да поддържат прилично и функционално потребителско изживяване.
Това винаги е било достъпно с правилата на CSSВъпреки това, при последното прилагане на същото, бяха предприети по -добри мерки, отчасти поради вече съществуването на съвременния мобилен свят, който е един от големите потребители на дизайна отзивчив.
Въпреки че има няколко рамки като Bootstrap или Фондация които ни дават отзивчиво оформление по подразбиране, не винаги можем да разчитаме на тях, затова е много полезно да знаем как можем да изградим оформление на тези характеристики със собствени средства.
Изисквания
1- За да завършим този урок, ще трябва да имаме основни познания HTML Y CSS, тъй като те са жизненоважни за разбирането на примерите, направени в урока.
2- От техническа страна се нуждаем от поне модерен браузър като Google Chrome, текстов редактор за писане на нашия код, който можем да използваме Възвишен текст o NotePad ++ или дори бележника на Windows или Gedit на Linux, ако се чувстваме приключенски.
3- Накрая се нуждаем от интернет връзка, за да изтеглим изображение или две, ако искаме да го поставим в нашия код, както ще видим в един от показаните примери.
Имотите minwidth и maxwidth
Това е може би първият аспект, на който се натъкваме, когато работим със среди отзивчив, тъй като много пъти се концентрираме върху това кога страницата намалява, но какво да кажем за новите екрани на 4K? Ето защо не трябва да пренебрегваме максималната резолюция, при която нашият уебсайт изглежда приличен.
minwidth и maxwidthСвойствата или атрибутите мин. ширина Y максимална ширина CSS ни помагат да се борим срещу този проблем, тъй като ни позволяват да установим максималните граници, при които искаме да бъде нашият дизайн отзивчив, тъй като ако не, крайностите в размерите могат да ни изиграят, особено в тези моменти, в които резолюциите продължават да се увеличават, но все още не стават масови.
В следния пример ще покажем как можем да регулираме нашите оформление благодарение на споменатите свойства, за това ще създадем документ HTML със следното съдържание:
Пример за адаптивно оформление 1Това, което направихме, е да създадем три елемента div, които работят като вид колони, така че в този случай казваме на неговия елемент контейнер статия че максималната му ширина ще бъде 1200 пикселаТака че, без значение колко голям е екранът, дизайнът никога няма да нарасне повече оттам, тогава ние създаваме три класа, по един за всеки div и един, който определяме минимална ширина по този начин, без значение колко е намален екранът, той винаги поддържа. за поддържане на този минимум пропорции, това е отлично за изображения, както ще видим на екранната снимка на примера, и накрая за класа плувам присвояваме му и минимална ширина. Нека да видим как изглежда нашият пример в браузъра, когато имаме голяма резолюция:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies при quis болка. Aliquam ac nisl vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies при quis болка. Aliquam ac nisl vehicula.
Увеличете
Сега нека видим как се мащабира, когато намалим малко прозореца на браузъра:
Увеличете
И накрая, нека видим резултата, когато направим прозореца да има размер, подобен на този на мобилния телефон:
Можехме да видим как се поддържат пропорциите, установени като минимални и максимални, но най -важното е, че нашият дизайн беше адаптиран към различните резолюции, с които го визуализирахме, и по този начин успяхме да гарантираме, че потребителят няма да загуби използваемост в опита им с нашия сайт.
Разбира се, това далеч не е нещо, което да бъде показано в продукцията, но ни дава представа къде трябва да насочим част от усилията, когато работим върху реални дизайни за нашите приложения и страници, интересното е, че колоните бяха коригирани така, че успяхме да видим как преминахме от оформление с 3 колони към оформление с една колона.
Използвайки Относителна подложка
The подплънки Това е мярка, която ни позволява да поддържаме пространство на съдържанието спрямо ръбовете на контейнера, така че да установим ограничение за това докъде ще стигне, не трябва да се бърка с полето, тъй като това е друго понятие.
Въпросът е, че подплънки почти никога не се взема предвид, когато се прави a оформление да бъде отзивчив което води до текстове и съдържание, които по-късно остават неестетични при промяна на разделителната способност, с която се гледа дизайнът.
В следния код това, което ще направим, е да поставим a подплънки което работи относително, тоест, тъй като размерът на прозореца се регулира, нашият подплънки Той ще се промени, за да запази пропорциите и по този начин съдържанието винаги ще остане такова, каквото сме го подредили, въпреки че има по -малко място поради промяната в разделителната способност. Нека да видим нашия пример за код:
Относителна подложкаПоддържайте пропорциите с относителна подложкаКакто виждаме, ние дефинираме свойствата подплънки на всеки клас с процентни стойности вместо фиксирани стойности с измервания в пиксели, по този начин интерпретаторът на стилове на браузъра ще даде измерване, което върви според стойността, която сме поставили, в края, когато видим нашия пример в браузъра получаваме следното:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, semper elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.
Увеличете
Сега, ако намалим размера на прозореца, ще видим как се прави корекция, но запазвайки пропорционално разстояние от текста до ръбовете:
След това забелязваме как нашият дизайн се поддържа и предотвратява деформацията, като намалява разделителната способност на човека, който го съдържа, като по този начин поддържа постоянен опит за нашия потребител.
Въпреки че има по -усъвършенствани концепции, които ще засегнем в други уроци, с тези няколко трика или съвети можем да успеем да дадем нов живот на старите си сайтове и много повече сега, отколкото търсачките като Google Те ни искат мобилна версия, за да можем да ни дадем предпочитания в резултатите. Най -важното за постигане на страхотни резултати е да експериментирате и да продължавате да практикувате много, така че тези решения да излязат естествено от ума ни и да не се налага да прибягвате до ръководства по всяко време.
С това завършваме този урок, тъй като виждаме, че не се нуждаем от никаква рамка за постигане на резултати отзивчив, и също така не е нужно да напускаме комбинацията HTML + CSSЕдинственото нещо е, че ако трябва да изградим свои собствени инструменти, удовлетворението от подобряването на нашия дизайн е голяма награда.
