Темата с въпросите по курса Slice and Dice


5

Пускам темата с питанките по курса Slice and Dice. По време на лекциите стана ясно, че липсата на въпроси от наша страна, не е добър знак и всъщност са се натрупали доста въпроси. Затова се разбрахме да създадем тема, в която да си канализираме въпросите и обобщим неясните неща.

Нека започна:

Споменаха се евентуални заготовки за финалния проект. Какви неща можем да си подготвим?

По време на нашите лекции темата с media queries е била само спомената (аз лично дори не си спомням кога), докато сега бяха разгледани сякаш сме мастъри по нея. Лично аз се питам има ли възможност само с медиа куерита да пренареждаме елементи от страницата (при пълна резолюция да са три колони, във втора - една от тях да стане главна и две под нея, в най-малка - трите да се подредят една под друга), или това трябва да се прави с JS и няма как да стане само с media queries?

Имам и още питанки, но в момента не се сещам за конкретни, ще добавям като "изплуват" в съзнанието ми. Надявам се да не съм сам и да завалят още въпроси :)




Отговори



1

Здравей, 
давам съвсем прост пример на въпроса ти за media queries, макар че кодът ми не е идеален. Да кажем, че в HTML имаш:

<div class="row clearfix"> <div class="col-main"> Some text </div> <div class="col"> Some text </div> <div class="col"> Some text </div> </div>

а в CSS:

.clearfix:after { display: table; content: ""; clear: both; } .row { border: 1px solid blue; } .col { border: 1px solid red; width: 30%; float: left; box-sizing: border-box; } .col-main { border: 1px solid green; width: 30%; float: left; box-sizing: border-box; } @media (max-width:800px){ .col-main { width: 90%; } .col { width: 45%; } } @media (max-width:600px){ .col{ width: 90%; } }

при ширина на екрана над 800px трите колони ще се подреждат една до друга, при ширина между 600px и 800px main колоната ще е отгоре, а другите две под нея и при ширина по-малко от 600px трите колони ще се подреждат една под друга.

Забележи, че пропъртитата в media queries наследяват стойностите, които са им били зададени първоначално, така че задаваш само стойностите, които трябва да се променят.

Моят въпрос е ще трябва ли да ползваме Gulp или Grunt за проекта и ако може да направим отново инсталация на някой от тези task runners с необходимите конфигурационни настройки на лекцията в петък. 




1

С уговорката, че закъснявам с 40-45 мин. за всяка лекция, също не се сещам да са обяснявани media queries.

Въпреки това, преди време прегледах видеото от курса, проведен през 2013 г. (Link) и там темата е разнищена много подробно.

Като цяло, според това, което разбрах, отговорът на въпроса ти е "да": с media queries могат да се правят различни стилове за разположението на елементите, според размера на устройството (и спрямо много други условия), без да е необходимо използването на JavaScript. Това, което се споменава в лекцията, а мисля че някой от лекторите потвърди и в настоящия курс, е че методите за изграждане на адаптивен дизайн, се използват в строга последователност, т.е. ако нещо може да се направи с Fluid Layout (използване на %-ти, em-ове вместо пиксели) и Flexible images and types (т.е. базиране типовете и картинкките на root-елементите им) - прави се стях; едва ако не може да бъде постигнато така или така е много тегаво - ползват се media queries.

... това е моето разбиране до момента. Ще се радвам в петък да го обсъдим ...

Да попитам на свой ред: ... за task runner-ите. Ясна е каква е ползата от тях и че тя може да се усети повече при разработка на голям проект от много хора и т.н. Въпреки това, не намирам какво е предимството на Grunt и Gulp пред един обикновен скриптов файл (.bat в windows).

Поздрави!


от AyrFX (948 точки)


0
Както говорехме и аз си пускам моите въпроси (за сега тези). Говорехте за "Lint" и как е било неписано правило да го използваме, но може ли в петък и за него да говорим. Също така тези "Grunt" и "Gulp" не са ми никак ясни, моля и те да бъдат разгледани. Тези media queries няма да е лошо да се разгледат с доста повече примери и прочее.

от nikistefanov (115 точки)