Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
Incalzire in pardoseala etapizata

Suprataxa card energie?!

Cum era nivelul de trai cam din a...

probleme cu ochelarii
 Impozite pe proprietati de anul v...

teava rezistenta panou apa calda

Acces in Curte din Drum National

Sub mobila de bucatarie si sub fr...
 Rezultat RMN

Numar circuite IPAT si prindere t...

Pareri brgimportchina.ro - teapa ...

Lucruri inaintea vremurilor lor
 Discuții despre TVR Sport HD.

Cost abonament clinica privata

Tremura toata, dar nu de la ro...

Renault Android
 

CSS:px sau %?

- - - - -
  • Please log in to reply
13 replies to this topic

#1
JustSm

JustSm

    Member

  • Grup: Members
  • Posts: 256
  • Înscris: 14.04.2016
Este ok ca in css sa folosesc pentru dimensiuni px sau doar procente?Adica de ex vreau sa pun text la o anumita distanta,folosesc margin si pun cativa pixeli.La mine pe monitor se va vedea ok(la distanta unde vreau eu) dar se va vedea tot la fel si pe rezolutii diferite?Deci e safe sa lucrezi cu px sau doar cu procente?

#2
xeleron

xeleron

    Suflet de campion...

  • Grup: Senior Members
  • Posts: 23,709
  • Înscris: 01.01.2008
% daca vrei ca elementul la care lucrezi sa scaleze

#3
cristirg

cristirg

    Senior Member

  • Grup: Senior Members
  • Posts: 7,711
  • Înscris: 16.11.2012
si px si %, pt un design responsiv se folosesc procente

http://stackoverflow...tages-or-pixels

#4
ionutz_joe2009

ionutz_joe2009

    Senior Member

  • Grup: Senior Members
  • Posts: 6,034
  • Înscris: 26.01.2011
Depinde.Uneori esti fortat in % , alteori fortat px.Ai @media screen care te ajuta mult mai ales in px.

Edited by ionutz_joe2009, 25 July 2016 - 21:11.


#5
maxtron_69

maxtron_69

    Senior Member

  • Grup: Senior Members
  • Posts: 2,534
  • Înscris: 18.08.2010
Pe langa %, tre sa studiezi cel putin ca sa stii despre ce e vorba si
em 
si
rem

In plus, ele se folosesc de obicei combinat, si % si px

Evident daca ai o pagina care va fi vizualizata si pe mobile, tablete si pe pc, deci rezolutii diferite, si dai latimea containerului sa spunem in px, o sa fie f greu, cand ai putea sa ai doar:

.container {
  width: 100%;
  margin: 0 auto;
  max-width: 960px;
}


Deci in exemplul de mai sus a trebuit sa le folosesti pe ambele pt a obtine efectul dorit.

cand vorbesti doar de margin, dai un exemplu f particular, unde px chiar ar putea fi utilizat fara probleme.

Edited by maxtron_69, 26 July 2016 - 10:31.


#6
DILAS

DILAS

    Member

  • Grup: Members
  • Posts: 320
  • Înscris: 03.12.2007
toti devi cu cap folosesc rem pt ca e singura marime care scaleaza in functie de device flawlessly si pt ca nu iti da batai de cap cum iti da em.
pe proiecte mai vechi(sau facut de haban-isti) o sa gasesti px folosit destul de mult, doar ca pixelul nu e acelasi pe toate device-urile si asta inseamna munca in plus. Procentele se flosesc din ce in ce mai rar lately si probabil or sa dispara de tot.

rem isi ia dimensiunea in functie de marimea pusa pe root HTML element, deci daca definesti font-size: 10px pe body dupa poti sa faci: .container { max-width: 960rem; } si sa fi sigur ca o sa se vada ok pe toate device-urile.

Mai mult decat atat ar fi bine sa folosesti si un procesor gen SCSS in care sa-ti definesti niste variabile pe care sa le folosesti peste tot in cod.

Edited by DILAS, 19 August 2016 - 17:28.


#7
maxtron_69

maxtron_69

    Senior Member

  • Grup: Senior Members
  • Posts: 2,534
  • Înscris: 18.08.2010

 DILAS, on 19 august 2016 - 17:26, said:

toti devi cu cap folosesc rem pt ca e singura marime care scaleaza in functie de device flawlessly si pt ca nu iti da batai de cap cum iti da em.
pe proiecte mai vechi(sau facut de haban-isti) o sa gasesti px folosit destul de mult, doar ca pixelul nu e acelasi pe toate device-urile si asta inseamna munca in plus. Procentele se flosesc din ce in ce mai rar lately si probabil or sa dispara de tot.

rem isi ia dimensiunea in functie de marimea pusa pe root HTML element, deci daca definesti font-size: 10px pe body dupa poti sa faci: .container { max-width: 960rem; } si sa fi sigur ca o sa se vada ok pe toate device-urile.

Mai mult decat atat ar fi bine sa folosesti si un procesor gen SCSS in care sa-ti definesti niste variabile pe care sa le folosesti peste tot in cod.
scss ul nu are nici o legatura cu intrebarea, dar l-ai mentionat ca sa para ca stii mai multe... :)
a spune ca toti devii cu cap fac ceva anume... ai tupeu.
Bootstrap foloseste % si px, si as zice ca au cap. Nu poti folosi doar una.

definesti font-size: 10px pe body? Ups, tocmai ai folosit px. Si daca definesti 10px o sa il redefinesti mai mare peste tot, ca nu mai vezi site cu font sub 13-14px in ziua de azi.

Opiniile sint impartite si vin de la devi cu cap... nu stiu acum ce specialist esti tu, daca ai ceva articole pe undeva ma inclin

Just use pixels

#8
ionutz_joe2009

ionutz_joe2009

    Senior Member

  • Grup: Senior Members
  • Posts: 6,034
  • Înscris: 26.01.2011
Pt ca te ataca Goagle, de aia trebuie font mare.Trebuie font mare, Goagle vede ca nu-i usor lizibil daca e de 10 si da na na(de titluri nici nu mai are rost sa vb).Se uita si dupa bold, italic, etc.Tre sa fie acolo unde-i place.

Css-ul trebuie sa-i placa lui Goagle, nu prea se mai face asa la gramada.Sunt multe criterii de care trebuie tinut cont.

Un alt ex ar fi visibility:hidden sau display: none sau dus la plus infinit in dreapta sa zicem(tiganeala).Iar nu-i place, ii place mai mult din php de ex(nu rulezi scripturi in nebunie de ex, ii tai din php si incarca si mai rpd evitand disp:none de ex, cu disp:none php-ul tot ruleaza pana la cap).Deci, atentie...sunt multe criterii, in functie de ele tre facut css astazi.

Edited by ionutz_joe2009, 03 September 2016 - 19:02.


#9
maxtron_69

maxtron_69

    Senior Member

  • Grup: Senior Members
  • Posts: 2,534
  • Înscris: 18.08.2010

 ionutz_joe2009, on 03 septembrie 2016 - 18:37, said:

Pt ca te ataca Goagle, de aia trebuie font mare.Trebuie font mare, Goagle vede ca nu-i usor lizibil daca e de 10 si da na na(de titluri nici nu mai are rost sa vb).Se uita si dupa bold, italic, etc.Tre sa fie acolo unde-i place.

Css-ul trebuie sa-i placa lui Goagle, nu prea se mai face asa la gramada.Sunt multe criterii de care trebuie tinut cont.

Un alt ex ar fi visibility:hidden sau display: none sau dus la plus infinit in dreapta sa zicem(tiganeala).Iar nu-i place, ii place mai mult din php de ex(nu rulezi scripturi in nebunie de ex, ii tai din php si incarca si mai rpd evitand disp:none de ex, cu disp:none php-ul tot ruleaza pana la cap).Deci, atentie...sunt multe criterii, in functie de ele tre facut css astazi.
Nu, incorect. Oricum ce spui tu nu are legatura cu subiectul topicului absolut deloc.
De ce incorect? Nu goagle te ataca si 13-14px nu e font mare. Te ataca utilizatorii, mai ales in era mobilului.
Nu goagle vede ca nu-i usor lizibil, in primul rand, ci utilizatorii.
Goagle nu face nimic rau ca e el rau si nimic rau in general. Doar se pune in pozitia unui utlizator.
Daca ca dev nu esti in stare sa tii cont ca un font ilizibil e.... ilizibil, atunci problema e la tine, nu la goagle.
Oricum, e doar unul din sute de mii de semnale de care google tine cont.

Sa incercam sa mentinem discutia on topic totusi.

#10
ionutz_joe2009

ionutz_joe2009

    Senior Member

  • Grup: Senior Members
  • Posts: 6,034
  • Înscris: 26.01.2011
Pai nu am spus ca pbl e la Google.% sau px exte gresit, nu exista pt ca fiecare are rolul lui.Am mers putin mai departe si am dat si ex cu Google.Este clar ca te taxeaza utilizatorul, dar mai nou i-o ia Google inainte si taxeaza primul pt ca utilizatorul sa fie multumit la prima accesare(evolutie Google/batalia intre motoarele de cautare)

Edited by ionutz_joe2009, 05 September 2016 - 09:35.


#11
maxtron_69

maxtron_69

    Senior Member

  • Grup: Senior Members
  • Posts: 2,534
  • Înscris: 18.08.2010

 ionutz_joe2009, on 05 septembrie 2016 - 09:33, said:

Pai nu am spus ca pbl e la Google.% sau px exte gresit, nu exista pt ca fiecare are rolul lui.Am mers putin mai departe si am dat si ex cu Google.Este clar ca te taxeaza utilizatorul, dar mai nou i-o ia Google inainte si taxeaza primul pt ca utilizatorul sa fie multumit la prima accesare(evolutie Google/batalia intre motoarele de cautare)
Nu ai zis, dar zici din nou.
google e doar un utilizator. Atat. Nu e nici o batalie intre motoare de cautare aici, duci discutia intr-o directie gresita si offtopic.
E vorba doar de incercarea unui soft automat sa te ajute sa nu mai faci aceleasi greseli facute de altii.
Cum sa folosesti un font de 10px... uite asta e text de 10px
Asta e text normal de 14px. Ce mai discuti pe tema asta? Gata, incearca sa admiti realitatea. Lumea a evoluat si uneltele de test automat sint tot mai dese.
Google are o multime cu care te ajuta. Atat. nu iti impune nimic. Tu poti sa folosesti text de 10px.
Acum gandim site urile si pt nevazatori, care folosesc screen readere.

#12
ionutz_joe2009

ionutz_joe2009

    Senior Member

  • Grup: Senior Members
  • Posts: 6,034
  • Înscris: 26.01.2011
Ba este batalie , fiecare motor incearca sa puna cat mai repede la dispozitia utilizatorului informatia.Trebuie sa fie afisata cat mai lizibil,  trebuie sa se incarce cat mai rpd , etc.Daca nu-i da ce trebuie x motor , iar y da , x nu va mai fi folosit.Hai sa inchidem pt ca e chiar si logic.

Nu este chiar un utilizator ci un intermediar.Daca la utilizatorul final ajunge ce nu-i trebuie intermediarul cade/ii ia altul locul.

Google te va propulsa pe primele pozitii cu font de 10 de ex  decat daca e vb de continut unic.Altfel...marca banu la samsar.

Pune la dispozitie unelte, dar toti le folosesc.Din mom ce toti sau cei mai multi le folosesc sau se folosesc multe alte strategii  singura diferenta o mai face programarea si reclama dupa un anumit nivel.

Edited by ionutz_joe2009, 06 September 2016 - 19:35.


#13
DarkAngelBv

DarkAngelBv

    === Proud owner of === ++++ Audi & Opel ++++

  • Grup: Senior Members
  • Posts: 12,747
  • Înscris: 24.03.2006
@Initiator, Nu aliniezi textul in pixeli de la margine. Trebuie sa vezi totul ca o cutie mare in care sunt introduse mai multe cutii (nu vorbesc aici de margini negative, text-indent sau transformari3D). Trebuie sa-ti construiesti "cutiile" in asa fel incat sa se alinieze toate asa cum vrei sa prezinti continutul.
La ora actuala sunt 2 practici larg raspandite:
- Fixed layout pe baza de breakpoints
Tot continutul sitului este prezent intr-un container cu o dimensiune fixa intre 2 device width-uri bine definite. Ex: Pe mobil intre 768px si 480px containerul are 480px si padding left-right 5px (box-sizing: border-box). Pe tableta (769-960) containerul are 769px cu padding left-right 10px, etc. Containerele din interior de obicei sunt construite pe baza de coloane, care se pot schimba/rearanja in functie de rezolutie

- Fluid layout
Containerul are width 100% - un margin prestabilit, de obicei cu o dimensiune minima si una maxima predefinite dupa care ramane fix. La fel ca si la fixed layout, sectiunile se definesc in "coloane" (impropriu spus coloane, sunt dimensiuni in procente predefinite) si vor ocupa mereu containerul, care in cazul de fata este mereu variabil.

Layout fix in pixeli se mai foloseste doar in cazuri extreme sau de catre incepatori.

Avantajul layout-ului fix pe baza de breakpoint este ca ai de testat afisarea pe fiecare breakpoint fara sa te intereseze toate rezolutiile (gen pentru 480-960 px testezi orice rezolutie intre 480 si 768px si orice rezolutie intre 768.00001px si 960px). Dezavantajul este ca trecerea se face brusc si arata neprofesionist.

Sper ca ti-am raspuns la intrebare si raspunsul este procente.

 DILAS, on 19 august 2016 - 17:26, said:

toti devi cu cap folosesc rem pt ca e singura marime care scaleaza in functie de device flawlessly si pt ca nu iti da batai de cap cum iti da em.
pe proiecte mai vechi(sau facut de haban-isti) o sa gasesti px folosit destul de mult, doar ca pixelul nu e acelasi pe toate device-urile si asta inseamna munca in plus. Procentele se flosesc din ce in ce mai rar lately si probabil or sa dispara de tot.

rem isi ia dimensiunea in functie de marimea pusa pe root HTML element, deci daca definesti font-size: 10px pe body dupa poti sa faci: .container { max-width: 960rem; } si sa fi sigur ca o sa se vada ok pe toate device-urile.

Mai mult decat atat ar fi bine sa folosesti si un procesor gen SCSS in care sa-ti definesti niste variabile pe care sa le folosesti peste tot in cod.
O prostie mai mare ca asta nu am auzit in ultimul timp :)
Base font de 10px se folosea pe vremea lu` Iliescu.
Mult mai logic este sa-ti definesti un base-font care este folosit cel mai des in site-ul ce urmeaza sa-l construiesti. Si in nici un caz nu creezi containerele dupa fontul de baza. Daca ai font de 10 si cineva doreste sa devina fontul de 14, containerul tau de 960px devine 1344px.
SASS-ul pana la urma tot CSS genereaza. Poti la fel de bine sa ai un CSS cu placeholder si sa faci replace programatic cu o variabila, ca pana la urma asta face si SASS-ul, doar ca la alt nivel.

#14
DILAS

DILAS

    Member

  • Grup: Members
  • Posts: 320
  • Înscris: 03.12.2007
vad ca lumea s-a grabit sa comenteze fara sa incerce sa inteleaga tot ce am zis. tipul asta explica mai pe larg:
https://www.sitepoin...m-units-in-css/

@maxtron poate am tupeu sau poate stiu ce spun, daca se considera SCSS, care e o chestie triviala, ca adus in discutie ca sa para ca stiu e cam tristuta treaba. Si mi se pare ca are toata legatura, in mod normal ar trebui sa ai cateva dimensiuni standard si alea definite in variabile. Cam pe aceeasi idee e si treaba cu rem.
btw devii cu cap de la bootstrap au pt alpha 4 ca sizing rem si px. Nu apar nicaieri % sau em.
devii si mai cu cap de la foundation rem, iar px doar pt box-shadow si chestii de genul.
Nici in articolul propus de tine nu se folosesc %, tipul recomanda px. Problema cu px e ca nu scaleaza la fel pe mobile, de aia rem e mai safe.

@darkangelbv daca nu-ti place poti sa definesti font-size pe 62.5%. Ca pe vremea lu ceasca. Nu vad ce relevanta are cand si ce s-a folosit. Motivul conteaza.
Fontul tau base o sa fie cel mai probabil 1.4rem adica 14px. Doar ca ala o sa stea pe root element al app-lui care sigur nu e body daca dezvolti un SPA. Daca vrei alt font e simplu, te duci si modifici variabila din SCSS sau CSS-ul de pe root el si ai alt font. Fara sa se modifice nimic pt ca mai sus e definit 1px = 1rem. Iar celelalte dimensiuni or sa scaleze fara probleme pe ORICE device daca sunt date in rem.
Ce ai zis tu e corect, dar cam outdated, atat bootstrap cat si foundation fac tranzitia spre rem.

Edited by DILAS, 18 September 2016 - 20:35.


Anunturi

Neurochirurgie minim invazivă Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate