[Jacob]

#css #css3 #html #html5

Mam problem ze zdefiniowaniem podstawowej wielkości czcionki.

W związku z tym mam do was kilka pytań:

1. Jak definiujecie font-size i line-height px / em / % ?

2. Jak resetujecie domyślne rozmiary czcionki jeśli używacie em / % ?

3. Natomiast jeśli wykorzystujecie wyłącznie px to jak to się ma do róźnych rozdzielczości ekranu (nie ma problemu ze skalowaniem px na różnych ekranach/urządzeniach) ?

[StayAlive]

@Jacob: ja zawsze używałem em, najlepiej wygląda biorąc pod uwagę różnicę rozdzielczości.

[Jacob]

@StayAlive:

No dobrze, ale jak robisz ? W body dajesz font-size:10px; line-height:10px; a potem już lecisz emami ?

[entrop]

@Jacob: tak jak napisaleś tak się powinno robić. em ustawia się zawsze relatywnie do parenta, niekoniecznie to musi byćbody

[Jacob]

@entrop:

To inaczej.

Jak najlepiej ustawiać font-size, żeby potem wygodnie używać emów/remów ?

Za dużo się już o tym naczytałem i mam totalny mętlik.

obecnie ustawiam html {font-size: 62.5%;}

dzięki czemu już od body zaczynając powinienem mieć 1em równy 10px, ale z moich obserwacji w chrome już domyślnym rozmiarem czcionki nie jest 16px a 12px, i ten hack mi się sypie.. (chyba, że robię coś źle?)

[entrop]

@Jacob: najlepiej to używaj sassa/lessa, tam są funkcje które będą przeliczały px na em-y za Ciebie. i to jest najwygodniejsze.

[Jacob]

@entrop: Już pal licho przeliczanie. Po prostu nie wiem jak najlepiej zacząć z tymi czcionkami dla body, skoro przeglądarki mają różne domyślne wartości to używanie emów mija się z celem jeśli nie ustawimy na sztywno wartości w px, mam rację ?

[entrop]

@Jacob: użyj resetki jakiejś

[Jacob]

@entrop:

No to używam "jakiejś" i nie działa : )

[entrop]

@Jacob: szczerze mówiąc nie wiem za bardzo gdzie masz problem, więc może od początku jak ustawiać font-size dla rwd:

- zresetuj wszystkie przeglądarkowe rozmiary za pomocą resetki

- ustaw np. 10px dla body, wtdy 1em=10px wszedzie w serwisie

- jak chcesz gdzieś mieć 12px to ustawiasz temu 1.2em

musiałeś zedytować ten wpis powyżej bo nie przeczytałem tego wcześniej, tak jak to napisałeś to nie rób.

[Jacob]

@entrop: ten myk z 62,5% dla html to z bootstrapa.

Ok czyli tak jak myślałem, body na sztywno, reszta w emach. Mój wybawco!

[entrop]

@Jacob: bootstrap srootstrap ;)

[n.....n]

@Jacob: ja używam rem i px, choć teraz jest jakiś bug w Chrome i trzeba ustawiać dla każdego bloku wielkość czcionki w rem. W przyszlości trzeba będzie stosowac vw oraz vh, zależnie od rozdzielczości

[Jacob]

ok robie teraz tak:

html {font-size:100%} //nadspisuje bootstrapowe 62,5%

body { font-size: 10px; line-height: 0.769;} (czyli line height jest tu wyliczony i jest równy 13px)

@narcyzman:

Nie bardzo rozumiem "dla każdego bloku" - czyli wielkość w chrome nie jest dziedziczona przez ten bug?

Taka ciekawostka:

Wyczytałem że jeśli korzystamy z remów i chcemy mieć wsparcie dla starego ie to definiujemy to tak:

p { font-size:12px; font-size:1.2rem} // jeśli body ma 10px