Hello,
Am primit un .psd la 1920x1080 iar eu incerc sa-l lucrez pe un calculator cu rezolutie mai mica. Daca un text e de 55px pe rezolutia din .psd, atunci cand il afisez pe o rezolutie mai mica, bineinteles ca din punct de vedere al proportionalitatii, nu mai da bine.
Cum as putea sa aflu ce corespondent are acel 55px pentru rezolutia mea?
Excluzand varianta “din ochi”.
Folosește rem sau em la dimensiunea fontului. Rem se ia după dimensiunea setată la elementul <html>, em se ia după stilul părintelui elementului.
html {
font-size: 100%;
}
ul {
font-size: 0.75rem;
}
font-size:100% înseamnă 16px, deci dacă vrei un text/element să aibă dimensiunea relativă a fontului de 55px pe majoritatea dispozitivelor setezi font-size: 3.44rem (3,4375*16)
incerc sa ma feresc de breakpoint-uri pentru ca sunt multe texte cu marimi diferite si ar insemna sa le setez de cel putin 5 ori
em/rem nu se redimensioneaza la redimensionarea ferestrei, ci la browser zoom (ctrl+ , ctrl-)
singura care vad ca merge cum imi inchipui eu e vw dar si acolo de la o anumita rezolutie trebuie sa pui breakpoint si sa spui care e minimul acceptabil
Nici nu văd de ce s-ar schimba cu redimensionarea ferestrei fără să setezi un breakpoint.
Varianta scurtă:
/* Older browsers */
html { font-size: 16px; }
/* Modern browsers only need this one */
@media screen and (min-width: 25em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
/* Safari <8 and IE <11 */
@media screen and (min-width: 25em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
@media screen and (min-width: 50em){
html { font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) ); }
}
acum imi dau seama ca e absurd si ca fara breakpoint, orice dimensiune procentuala sau calculata in functie de un basepoint, la un moment dat ajunge sa fie prea mica
chestia asta de mai sus inteleg ca-mi da o marime de baza, iar in continuare tot ce fac, fac cu rem
dar tot la “ochi” ajung pentru a afla cati “rem” inseamna 55px pe 1920
Nu prea inteleg ce vrei sa faci, dar vezi ca rezolutia este relativa pentru ca densitatea pixelilor poate fi diferita, chiar si pe aceeasi rezolutie.
LE: Ma rog, m-am exprimat gresit dar intelegi tu ce am vrut sa zic 
primesti un psd de 1920x1080px cu un text de 55px
in html la ce marime il pui in asa fel incat sa fii sigur ca se va vedea ok si la 1920 si la 1024 (ok, adica proportional fata de alte elemente)?
sa spunem ca faci si breakpoint-uri. sti cu siguranta ca peste 1920 marimea e 55, dar in breakpoint-ul de 1280 ce marime pui pt acel text? excluzand varianta “din ochi”
@anon9275431: Densitatea diferă, într-adevăr. Dar dacă ai un ecran hidpi de 24" și un ecran normal de 24", ce va fi afișatpe ecran va avea dimensiuni similare (în milimetri, dacă pui o riglă pe ecran).
@kleampa: nu ai nevoie să faci asta 
La fel cum la 1600 și la 2400 vei avea același font size, la fel funcționează și în jos. Presupunând că ai un titlu de 55px, pe ecrane mici ajustezi fontul în momentul în care observi că nu îți intra cuvintele bine. Nu există o rețetă universal valabilă, trebuie să testezi la ochi (de cele mai multe ori este suficient redimensionarea browserului).
Ai putea folosi o formulă de genul mărime*0.8 la fiecare breakpoint. În cazul tău:
Din nou, depinde pentru ce va fi mărimea asta. Dacă este pentru un titlu ce știu sigur că va avea maximum 3-4 cuvinte, atunci mă limitez la două variante. Dacă va fi un titlu variabil (e.g. titlul articolelor unui blog) atunci testez cât mai multe combinații; oricum ar fi, foarte rar ajung la trei variante (sau mai mult).
Dacă vrei musai să faci o chestie super flexibilă, folosește variabilele css:
:root { --headline: 30px }
@media all and (min-width: 768px) { :root { --headline: 36px; } }
@media all and (min-width: 1200px) { :root { --headline: 44px; } }
@media all and (min-width: 1600px) { :root { --headline: 55px; } }
.headline {
font-size:var(--headline);
}
deci cautam flautul fermecat
ma consider lamurit. multumesc
Sunt confuz.
Daca avem doua monitoare de aceeasi diagonala, 24", dar rezolutii diferite, 3840 si 1920, deci sa rotunjim la 200 si 100 puncte pe inch, ce va afisa va fi masurat pe ecran la aceeasi dimensiune? Aveam impresia ca pixelul este relativ, adica un pixel pe 3840 si 200ppi ar fi de doua ori mai mic decat pe 1920 si 100ppi.
Si la fel, un pixel pe un telefon cu rezolutie full hd si 450ppi ar afisa de 4.5 ori mai mic decat un monitor de 1920 si 100ppi.
Exact 
Totul se face la nivel de OS, tu nu ai control asupra acestor aspecte (nu din browser, cel puțin).
Este ilogic să ai un monitor de 24" cu 3840x2400; nu ai vedea nimic (sau ar fi extrem de obositor). Pe telefon ți-o zice ție Apple că ai 1920x1080, dar… dacă o să forțezi rezoluția asta în browser (cu meta viewport), vei vedea că nu poți face nimic, iar rezoluția efectivă (window.innerWidth) va fi ~900x400 (sau cât naiba o fi pe iPhone).
Prin urmare, dacă dublăm ppi, înjumătățim rezoluția: vom avea tot 1920x1200, dar, având mai multe puncte pe cm², vom avea o imagine mai sharp.
Sigur, există diferențe, că nu vei avea niciodată ecrane cu fix dublul de PPI. Dar cu o mică marjă de eroare, rezultatul este cam același. (acum văd cât de mult au scăzut prețurile: cel mai ieftin e 1300 lei la PCG și 1400 lei la Evo; bine, pe de altă parte, parcă n-aș cumpăra cel mai ieftin monitor 
)
Gândește-te doar ce s-ar întâmpla dacă conversia px->mm ar varia mult în funcție de ppi: ar exista (cel puțin!) două variante de web: una pentru ecrane normale, alta pentru ecrane retina și niciuna dintre versiuni nu ar fi vizibilă pe celălalt tip de ecrane…
related:
Let’s say you design a blue square of 109*109px on the screen we just talked about above which has a resolution of 109PPI, a screen pixel size of 2560x1440 and a physical width of 23.5”. Because its size matches exactly the number of pixel per inch the monitor displays, the square will have a width of 1” and a height or 1”.
Now take the same 23.5” screen with with a resolution 33% smaller, 72PPI. In this case, the same blue square will be 33% bigger because displayed on the same physical size.
http://sebastien-gabriel.com/designers-guide-to-dpi/images/blue-square-01.png
[…]
Let’s take our 27” Cinema Display that can display 109 PPI at a best pixel screen size of 2560*1440px. If you reduce it, the elements will appear bigger. After all you’ll have 23.5 horizontal inches to fill with virtually less pixels.
Cea mai la îndemână chestie pe care o poți face este să testezi un iphone pre-retina (3gs cred că a fost ultimul) cu un iphone retina, dar de aceeași dimensiune (e.g. iphone 4). Au aceeași mărime a ecranului, au o densitate mai mare a pixelilor (dpi), și, cu toate astea, totul e afișat la fel pe ambele
Este afisat la fel, dar pe retina totul are mai multi pixeli.
The multiplier is your mathematical savior when it comes to converting your design for all the different PPIs. When you know the multiplier, you don’t have to care about the detailed specs of the device anymore.
Let’s take our iPhone 3G and 4 example. You have 4 times as many pixels (2x width, 2x height) in the same physical size. Therefore your multiplier is 2. It means that to make your assets compatible with the 4G resolution, you just have to multiply your assets size by 2 and you’ll be done.
Let’s say you create a 44*44px button which is the recommended touch target by iOS (I’ll talk about that later). Let’s call him by a typical button name like “Jim.”
To make Jim look good on the iPhone 4 you’re going to have to create a twice-as-large version of him. That’s what we’re doing below.
Designer's guide to DPI
A multiplicat cu doi pentru ca pe 4 densitatea este fix de doua ori mai mare decat pe 3G. Pentru a ocupa acelasi spatiu fizic din ecran, pe Iphone 4 trebuie sa inmultesti dimensiunea pe care o doresti cu echivalentul raportului dintre densitatea punctelor.
Corect, dar asta nu este problema ta Conversia se face la nivel de OS și, exceptând cazul în care specifici tu cu <meta name="viewport"..., nu vei fi niciodată în situația de a avea o dimensiune diferită a lucrurilor afișate pe diverse ecrane.
Singurul problemă reală la toată densitățile variabile este legată de imagini. Dar asta e o discuție pentru o altă zi
Este corect doar dacă vorbim de aplicații native (i.e. swift/ObjC)
Cred ca am ajuns pe aceeasi lungime de unda, in sfarsit
Dar acum, o diferenta tot trebuie sa fie pentru ca sistemele de operare scaleaza / multiplica pe o baza diferita. De exemplu din cate stiu Apple are ca baza 72, Windows 96 iar Android 120.
Păi este, dar este neglijabilă
