Despre responsive si proportii

@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 :slight_smile: 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:

  • < 1000 : 35*0.8 => 28px
  • >= 1000: 44*0.8 => 35px
  • >=1200: 55*0.8 => 44px
  • >=1600: 55px;

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);
}
2 Likes