Кое е правилно, PX или % за задаване размери на елементите ?

lancelot 3 Точки

Кое е правилно, PX или % за задаване размери на елементите ?

Здравейте, искам да попитам кое по правилно да се ползва, когато задаваш различни стойности на елементите % или PX ?
Понеже, уж сега нещатата се правят по респонсив относно екрани на които ще се изобразява сайта ви и гледах някакъв урок в който човекът ползваше предимно %. Само че сега като направих някакво мое дизайнче със HTML+CSS видях, че като ползвам % много неща изглеждат много грозно при определена големина на екрана. Искате даден контейнер да изглежда като квадрат а при много малак екрана се преозмемрява доста грозно и става примерно някакъв странен правоъглник.
Разгледах няколко големи сайта, като Фейбук, гугал и т.н. и видях, че те ползват точно фиксирани стойности, но пък може да са писали кодът си отдавна.
По-добре ли е всичко да със точно фиксирана големина и просто, когато засече определен размер на екрана да променям, нещата и да се старя да не ползвам % ?.

Тагове:

13/05/2015 21:14:19 Advanced Level: Front-End

brslv 69 Точки

По принцип % се използват предимно за основния wrapper на сайта/приложението и то рядко. Останалото, както сам си забелязал, не е много красиво с %. Защото на един екран 50% изглеждат по един начин, а на друг - по друг начин.

Най-адекватния начин е да използваш фиксирани стойности за кутийки, контейнери, форми и т.н. с max-width/max-height и min-width/min-height и media queries. Казвам ти го като относително добра и често срещана практика, но нещата са различни в зависимост от проекта.

Еспериментирай.

Успех. :)

13/05/2015 21:20:07

goodlifeinc 31 Точки

Аз съм забелязъл, че по принцип се използват пиксели за външният wrapper в html-a и след това проценти за елементите в него. По този начин когато искаш да го направиш респонсив слагаш @media и задаваш в пиксели размер на wrapper-a.

14/05/2015 10:08:14

lancelot 3 Точки

Това звочи, наистина доста логично и удобно.

14/05/2015 10:15:00

enevlogiev 1168 Точки

Може и да звучи логично, но не е толкова просто. За по-високите резолюции ( > 960 пиксела ) може и да мине, но на един смартфон примерно (обикновено са 640 или 480 пиксела) да сложиш wrappera с фиксирани пиксели и да се надяваш всичко друго да се намести от само себе си няма да стане. Ако си забелязал, mobile-friendly страниците изглеждат доста по-различно от стандартните. Примерно, навигацията се скрива и се премества в един така наречен сандвич : )

Освен това, останалата част от елементите трябва да се репозиционират по някакъв по-удачен начин. И не на последно място, различни марджини, падинги, размер на шрифта и т.н. трябва да се коригират. Много трудно всички тези неща ще се получат само с проценти.

Общо взето, за всяко медиа куери се пишат нови правила. Не всичко се променя, но основните неща трябва да се изпипат.

14/05/2015 12:39:51

lancelot 3 Точки

Значи да ползваме % само за големите резолюции и то по възможност не всичко, ами определени неща при които ако резолюцията е 200-300 пиксела по-малка пак ще изглежда добре ?

14/05/2015 16:58:08

luboslav1995 109 Точки

Добър въпрос, но не мисля, че някой може да ти отговори със сигурност. Мненията на колегите са правилни. Може би е по-добре да се ползват % за по големите контейнери, защото при по големи резолюции проблемите са по малко, при % оразмеряването е по-точно.Буутстрап ползват и проценти и пиксели. Важното е в края приложението или сайта да изглежда добре.

Поздрави,

Любослав

14/05/2015 17:44:05