Adaptive оформление - как да се преодолее болката
- CSS
- HTML
- адаптивен дизайн
- уеб разработка
Когато имаше принцип на адаптивно оформление за мен това беше кошмар, от който аз все още не може да се възстанови, това е такава болка - защото по всяка разрешение практически нужда perevorstyvat оформление, писане нов код, се оказва много код, който е по-трудно да се поддържа. Нека разберем това болка, наречена "код ентропия"
Дадоха ми наскоро за налагане на мобилния оформление кандидатстване и най-накрая реши да се опита да преодолее тази болка, да се направи красиво и сбито - използване вещни. Струваше ми се, най-простото решение, 100% мобилни браузъри поддържат тази единица. Долната линия е, че пишем на няколко реда медийни заявки за HTML тагове, което показва само основните размери на шрифта в пиксели, пропорционално на това как трябва да изглежда ние се подиграват с различни резолюции и vorstku на почивка без медийни заявки, които правим, както обикновено, но вместо да използва пиксела вещно. Този метод може лесно да бъде намалена и да персонализирате оформление в зависимост от размера на основния шрифт.
Минимизиране на кода и лекота на адаптивно оформление по такъв начин, просто огромен!
Беше единственият недостатък на този метод: това е необходимо да се провежда текущ централен пиксел PSD оформление вещно, но аз бързо решили проблема - пише специална функция и са настроени най-рано в пикселите, самата Препроцесорът преведена вещно.
Но! Основният трик е, че набирате метод адаптивна мобилно приложение, когато проектът е бил един и същ.
Когато се върнах в adaptivke за обикновените сайтове - болката се върна при мен дори и с по-голяма сила, отколкото преди, защото обикновено имаме от 3 до 6 различни дизайна:
1) Desktop голям пиксела 1600-1920
2) малка Desktop / лаптоп
Аз със сигурност преувеличени, но най-малко три оформление трябва да се направи със сигурност.
Така че въпросът №1 и най-важното: как да се сведе до минимум vorstku адаптивен код и да направи хубав? Как да се намали т.нар ентропия код? Има ли някакъв хладен подход / методология?
Погледнах различни места готините уеб студиа, за да намерите отговор там и видях, че всичко, набиран на случаен принцип, че въобще не е направил труда.
Единственото нещо, което е видял някои някаква причина ги и проценти се използва за шрифтове, вместо обичайните пикселите. Нещо като да мащабирате текста, въпреки че не е ясно как тя намалява код за adaptivki, аз усложни нещата - трябва да се проведе изчисления, в зависимост от родителското устройство и размера на шрифта, дори Препроцесори вероятно няма да помогне. Не знам защо трябва да се къпят размер на шрифта Ем единици, проблеми с вещни все още не си отиват. Може би аз съм лош програмист. Между другото uporotyh особено на тези сайтове ги използват за марж и други кутия с размер свойства.
Въпрос №2:
Какво има смисъл да ги използвам?
И белия списък въпрос №3:
Наистина не съществува единна методология, наистина в vorstke толкова лошо, че всеки иска и как г. Cit? Или съм виждал лоши примери (макар и търси сред първите themeforest и топ уеб сайтове студиата)?
macik_spb овладели професия преди - оформление или дизайн?
macik_spb ясно. Аз си мисля да учи дизайн, който не е бил глупости с криви оформление и което го прави по-лесно, по-интересна и много други.
От особености: най-вече използвам помага 12px-Ной мрежа, на която първо ниво praktieski граници и размери на всички елементи. Размерът на екрана, което правя резюмета - за мен има само концепцията за (мобилен портрет), две (таблетка портрета мобилен пейзаж) и три (таблетка пейзаж десктоп) колона съдържание. Но аз мисля, че това е тема за отделна статия Habra, ако изобщо някой се интересува.
Когато започнах да наложи адаптивна, той е бил изправен пред същия проблем, аз бях измъчван от същите въпроси ..
Между другото, косвено, до размера на тази работа са имотите отгоре, отляво, долу, дясно - те могат в някои случаи да се използват, за да определите размера на елемента.
Налице е също така изчислено () - удобен нещо за позиционирането на процент към смяна на пикселите (например изчислено (50% - 100 пиксела)).
BTN подадете цвят: #fff;
граничен радиус: 5px;
подложка: 10px 20px;
текст-трансформация: главни букви;
текстови тегло: смел;
марж: 50px;
ширина: 150px;
>
среда (мин ширина: 768px) и (макс ширина: 920px) .btn-представят ширина: 120 пиксела;
>
>
среда (мин ширина: 550 пиксела) и (макс ширина: 767px) .btn-представят ширина: 100px;
>
>
Когато е необходимо да се наложат някои lendos, такъв подход работи с гръм и трясък. Не е необходимо да се изчислят луди фигури с remami Emami и прекарват много време. В крайна сметка, това, което плащат, такава работа. Само хора, които работят по един и същ проект (например голям онлайн магазин), могат да си позволят един ден, за да си помисля, изберете ширина ги или вещни. Тъй като това може да бъде важен архитектурен дизайн, грешното решение, за което, а след това може да излезе голям проблем. Точно като ефекта на пеперудата))
Що се отнася до загуба на време. тайна по целия свят, ще кажа, че има невероятен инструмент, наречен Avocode - тя не само дава възможност за автоматизиране изчисленията и вещни до заетост, но и в целия бона ускорява всички процеси verstalnye рутинна!
Друг важен момент е, че по-сложен проект, толкова повече има нужда да използвате някои методология оформление. Защо, дори и с налагането на общ класове Кацане стоя в common.css, например, същите бутони - те са склонни да имат общ стил. Или някои общи стилове на отделните блокове. И в някои онлайн услуга, без методологията просто прави - или овесена каша навън. Повече напълно формулирани и определени правила, по-малко вероятно, че проектът ще се превърне в вискозен чудовище, което може да работи само на тези, които го пише от самото начало. И след това много трудно))
Връщайки се на относителните дялове - те наистина F трябва да се прилага навсякъде, само защото те искат единство. По-добре е да използвате такъв, който е по-по отношение на всички усещането за добре.