Въпрос за Флуидният дизайн


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

в Уеб font-end разработка от Цветан Димитров (0 точки)


Отговори



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

от Hristo.B (3885 точки)


1
Здравей
По-лесният вариант е да си караш от начало с пиксели и после само да си добавиш media queries за различните разделителни. По-трудният вариант е да си започнеш още от начало с проценти. Идеята е да не се налага да си преправяш след това css - а.

от Kristin (484 точки)


2

Без да навлизам в дискусии За / Против готовите responsive frameworks, би могъл да хвърлиш едно око на 10 от най-популярните open-source такива. Основната критика за тях е, че идват вградени с много излишни неща (оттук и по-голям размер на кода), но Skeleton например е страхотен старт според мен.


от stoberov (3451 точки)


0
Не съм много сигурен как да ги използвам.Но видях добри отзиви за Скелетон! Благодаря!

от Цветан Димитров (0 точки)


4
Здравей,
Започвайки с пиксели, и след това да ги прехвърляш на проценти си е мн занимавка. Ако ще го правиш responsive, давай от началото.
Принципно има media queries, които до някъде ти решават тоя проблем. С тях може да променяш размерите при дадени условия (примерно резолюция). Ако обаче разчиташ само на MQ, тогава ще се налага да преписваш мн, ама мн CSS (навсякъде където имаш промени...).
Моя съвет е следния: за нещата, за които лесно се нагласят проценти -> почвай с процентите от началото, за останалите - media queries
Поздрави,
Дончо Минков

от DonchoMinkov (12706 точки)


0
Мерси за съвета. А по принцип формулата с която изчисляваме от пиксел към процент max - width: 500px, margin: 5px -> margin = 5px / 500 = 0,01 * 100 = 1%; Всъщност това е доста неточно. Това ли е начина?

от Цветан Димитров (0 точки)

0
да, това е начина. Заради един браузър е добра идея да правиш процентите да са 98 или 99, но никога 100. Защо? Ами проблеми със закръглянето. 82.4% + 17.6% = 101% :D

от DonchoMinkov (12706 точки)



2

 Току що направих един дизайн, който исках да стане responsive. Подходих по следния начин: Първо div#wrapper {width:100% overflow:hidden}. Така си гарантирах, че като свивам прозореца цялото съдържание ще се свива пропорционално и НЯМА да има хоризонтален скрол. На вътрешните елементи им зададох ширините с проценти, всички шрифтове в em. Всички margin-и и padding-и също с проценти. Изчислих процентите на база ширината на елементите от PSD-то.

 Оттам нататък при по-малките резолюции използвах media queries. Зададох по-важните елементи да заемат 100% при определена резолюцип(така че по-маловажните да минат отдолу). При по-малка ширина падигните изчезват, при още по-малка някои елементи изчезват и т.н. 

 Ако започнеш с проценти отначало работата ти с media queries е много по-лесна, иначе става батак.

П.С пиши ако искаш да ти пратя кода да го прегледаш

 Поздрави


от ivan.mihov1 (4988 точки)


0

 Знаем, че на картинките трябва да се зададат размери, за да може браузъра да им задели място преди да ги е заредил. Грешно ли е, ако тези размери се зададат с проценти в CSS-a(напр. img {width: 29%; height:29%})?

Не мога да разбера дали тогава браузъра знае колко място да им задели...

Питам, тъй като задаването на фиксирани размери затруднява флуидния дизайн.


от ivan.mihov1 (4988 точки)


0
Видях че не е грешна практика да се използва % за image, като варианти забелязах че се използва най-често само ширината (width: %) или ширина и височина за подобряване на процеса на зареждане на браузера при промяна на големината му - max-width:100%;height:auto; Предполагам че някой колега който е по-напред в материята ще ти даде по-точни насоки, иначе можеш да погледнеш интересни съвети ето тук: https://developer.mozilla.org/en-US/docs/Web_Development/Responsive_Web_design

от tsonko_genov (708 точки)

0
Я си дай някво линкче да ти скивна кода да се ориентирам малко...

от Цветан Димитров (0 точки)