Възползвайте се от тези съвети, за да създадете ефективно адаптивни оформления.
Представете си, че сте свършили цялата упорита работа, за да направите наистина страхотно оформление. Но след това, когато направите прозореца на браузъра си малко по-малък, ще откриете нещо, което прелива. Изпращате медийна заявка, за да коригирате проблема. Но при преоразмеряване на прозореца забелязвате, че нещо друго се е счупило.
Това е нещо, което повечето CSS разработчици ще изпитат в един момент. Но за щастие имаме няколко модерни CSS решения, които улесняват много просто разработването на неща и те да работят добре. Тази статия разглежда 5 полезни практики, които трябва да имате предвид, когато разработвате уебсайтове. Тези съвети ще ви помогнат да избегнете досадни прекъсвания във вашия дизайн.
1. Започнете с глобален стилов лист
Винаги започвайте с глобален стил, когато пишете CSS. Не се притеснявайте за оформлението. Вместо това задайте общи стилове като типография, цветове и фонове. Нулиране на полета, премахване на подчертавания от връзки и т.н.
След като приключите с общия стил, можете да започнете да създавате оформлението и да насочвате към отделни елементи в оформлението. По принцип започнете от върха и след това преминете към елементите.
Следният CSS пример нулира полето на всички елементи до 0, дефинира типографията и цвета на всички основни заглавия и добавя последователно поле към всички тях:
тяло,
h1,
h2,
h3,
стр {
марж: 0;
}h1,
h2,
h3 {
цвят: син;
шрифтово семейство: "Вердана" безсерифен;
тегло на шрифта: 900;
височина на линията: 1;
}
h2,
h3,
стр {
margin-bottom: 1рем;
}
Сега, след като сте дефинирали всички основни стилове, можете да изграждате оттам. Например, можете да добавите подложка към контейнерния елемент. Това ще изтласка съдържанието от краищата на вашия браузър. След това можете да приложите a максимална ширина към изображения, така че да могат да се адаптират към ширината на своя контейнер. Въпросът е да започнете от общите елементи, преди да се насочите към конкретни елементи.
Още веднъж, оформлението ще бъде отзивчиво. Така че, когато промените размера на екрана, размерът на елементите ще се промени съответно. Като разработчик трябва да сте наясно с тези CSS съвети и трикове тъй като те могат да издигнат продуктивността ви на следващо ниво.
2. Избягвайте фиксираните размери
Когато започнете да мислите за оформления, първото нещо, което трябва да имате предвид, е да избягвате фиксирани размери. Фиксираните размери се отнасят за свойства като ширина: 1000px, височина: 200px, и така нататък. Задаването на фиксирана височина или ширина само ще ви създаде проблеми в дългосрочен план.
Вместо това използвайте адаптивни височини и ширини. Един от начините е да използвате мин. височина и мин. ширина вместо височина и ширина. Да предположим например, че сте задали ширината на елемент на 600px. Когато станете по-малки от 600px, тогава съдържанието ще прелее:
Вместо това трябва да промените свойството от ширина да се максимална ширина. с максимална ширина, елементът ще може да се свие, когато прозорецът на браузъра се стесни. И ако прозорецът стане широк, текстът ще се разшири обратно до първоначалната си дължина. Ето резултата:
Това е същото за височина. Да предположим например, че сте задали височина на заглавка до фиксирана стойност от 200 пиксела.
заглавка {
височина: 200px;
дисплей: решетка;
място-артикули: център;
}
Това идеално центрира всичко в заглавката. Но когато стесните прозореца на браузъра, съдържанието в крайна сметка ще изтече от контейнера си. И това е така, защото сте задали фиксирана височина на заглавката.
В общи линии, височина и ширина и двете са опасни свойства. Решението е да се използват адаптивни височина и ширина, т.е. мин. и максимална височина, и мин. и максимална ширина. В тези случаи, ако браузърът се сблъска със ситуации, в които съдържанието става по-дълго, тогава заглавката ще расте, за да се адаптира към това.
Това е един от най-често срещаните CSS грешки, които трябва да избягвате.
3. Не забравяйте, че вашият уебсайт е отзивчив по подразбиране
Имайте предвид, че вашият уебсайт е отзивчив дори преди да напишете един ред CSS код. Този начин на мислене може да ви помогне да избегнете прекаленото усложняване на процеса на проектиране. Оформлението ще работи на масивни екрани и малки екрани. Може да не е красиво. Може дори да е трудно за четене на големи екрани. Но уебсайтът се адаптира към прозореца за изглед, независимо от размера му.
Разбира се, изображенията могат да прелеят и текстът да е твърде малък. Но няма да загубите нищо с оформлението по подразбиране. Вашият текст няма да се счупи и всички елементи ще се виждат на екрана.
Разбирането и възприемането на този факт наистина може да ви помогне, когато пишете своя CSS код. Когато срещнете проблеми, ще сте сигурни, че грешката произтича от CSS, който сте написали. Това улеснява намирането на проблема и отстраняването му.
Опитайте се да използвате медийни заявки само за добавяне на сложност. Например, когато искате вашето оформление да има три колони на по-големи екрани. В противен случай не ги използвайте. За по-задълбочено потапяне в медийните заявки прочетете нашия ръководство за медийни заявки.
Ето един сценарий. Представете си, че елементът с име на клас .разделяне има три елемента в себе си. Със следния CSS ще бъде създадено оформление с три колони:
.разделяне {
дисплей: flex;
flex-direction: ред;
празнина: 2рем;
}
При по-малки екрани (40ем широк или по-малък), бихте искали всичко да заема една колона. Така че бихте направили това:
@медия(максимална ширина: 40ем) {
.разделяне {
дисплей: блок;
}
}
Тук заменяте подравняването по подразбиране (три колони). Но медийната заявка е ненужна, защото браузърът използва дисплей: блок по подразбиране. Така че не е нужно изрично да го дефинирате.
Имайки това предвид, можете да преработите кода си, за да използвате една медийна заявка, която се прилага само за големи екрани. Там ще превключите към три колони, когато екранът е по-широк от 40 em:
@медия(максимална ширина: 40ем) {
.разделяне {
дисплей: flex;
flex-direction: ред;
празнина: 2рем;
}
}
На малки екрани браузърът подрежда всичко в една колона. Но не е нужно да го посочвате, защото браузърът използва дисплей: блок по подразбиране. По този начин сте използвали медийни заявки само за добавяне на сложност.
Така че вместо да добавяте сложността и след това да трябва да замените куп свойства, сега добавяте сложността, когато имате нужда от нея. През повечето време ще ви трябва само мин. ширина медийни заявки. Започнете първо с мобилни устройства, след това, когато сайтът изглежда страхотно на мобилни устройства, добавете сложността (напр. колони) за версията за настолни компютри.
5. Възползвайте се от модерния CSS
Използвайки модерни CSS подходи, можете да се отървете от повечето проблеми с подравняването и точки на прекъсване и да преминете към постигане на вътрешен дизайн.
Един от начините да направите това е:
h1 {размер на шрифта: скоба (3rem, 1rem + 10vw, 7rem)}
Това затяга h1 между минимален и максимален размер на шрифта. Най-малкото, до което искаме да стигне, е 3рем и най-високото е 7рем. Средата е това, което ще повторим (1rem + 10 vw). В резултат на това заглавието автоматично ще се свие, когато прозорецът за изглед стане по-малък, и ще се увеличи, когато стане по-голям.
Научете повече за модерния CSS
CSS се разви много през годините. Днес имаме по-нови и по-добри подходи за позициониране на елементи в CSS. В тази статия се докоснахме до някои от тези практики и подчертахме как те могат да ви помогнат да избегнете обичайните клопки в дизайна. Един от най-добрите начини да научите модерен CSS е чрез практическия подход, като например използването на модерен CSS за проектиране на HTML таблица.
