Mam takie pytanie do doświadocznych webmasterów.
Chciałbym, aby moja strona była zoptymalizowana pod różne rozdzielczości.
I tutaj pojawia się problem z czcionką. Jakich jednostek użyć do jej definiowania w css?
Wykluczyłem px i postawiłem na jednostkę vh. Ale pojawia się problem z wyświetlaniem.
Stronę tworze na monitorze o rozdzielczości 1650x1050. Na laptopie o rozdzielczości 1388x768, czcionka jest sporo za mała i źle się czyta. Czemu tak się dzieje? Skoro załóżmy 2vh to 2% wysokości ekranu, to czcionka powinna być proporcjonalna do rozdzielczości. Inne elementy zdefiniowane w vh i vw są dobrze wyświetlane. Problem jest z czcionką. Będę wdzięczny za wskazówki.
Poczytaj o tzw. “media queries” i “responsive web design”. Z drugiej strony na laptopie z ekranem 1388x768 wszystko źle wygląda, bo takich ekranów powinni zakazać ;). Użytkownik będzie przyzwyczajony.
Nigdy nie słyszałem, żeby skalować czcionkę w zależności od rozdzielczości. Chyba że robisz jakiś artystyczny pełnoekranowy dashboard i chcesz mieć stałe proporcje. Przecież w tym momencie rozmiar czcionki będzie ci się ciągle zmieniał jak tylko ktoś zmieni rozmiar okienka. Nigdy się z czymś takim nie spotkałem i byłoby to łagodnie mówiąc wkurzające.
Proponuję też zaopatrzyć się w jakieś normalniejsze monitory, bo to co podajesz to lata 2000’. Teraz ludzie mają ekrany 4k w 12’ laptopach.
To nie w tym leży problem autora.
Ja używam em bo da się je wyliczyć i ładnie wszystko przeskalować.
No właśnie wysokości - czyli ilości PX w pionie, czyli przy mniejszej rozdzielczości wyjdzie Ci mniej pikseli. Mylisz rozdzielczość matrycy z jej rozmiarem. Monitor masz duży przynajmniej 22 cale więc pojedynczy piksel też będzie większy niż w 15 calowej, małej matrycy laptopa. Poczytam czym jest dpi bo to będzie miało znaczenie.
Zresztą zrób sobie prosty łopatologiczny test. Postaw laptopa obok monitora na obu odpal html z kolorowym divem o stałych wymiarach powiedzmy 150px na 150px i zobaczysz że pomimo iż mają ten sam rozmiar na ekranie są różnej wielkości fizycznej ponieważ na dwóch matrycach masz różne zagęszczenie pikseli.
Dlaczego? Może za pomocą media queries mieć różne wielkości czcionek, w zależności od zakresów rozdzielczości, chociaż sama w sobie ta koncepcja jest kiepska moim zdaniem.
I co mu to da? Skoro nie ma znaczenia rozdzielczość a dpi? Możesz mieć dwa różne monitory jeden 1920x1080 22 cale a drugi 3840x2160 44 cale. Ustawiając pod rozdzielczość rozmiar czegokolwiek na drugim monitorze fizycznie będzie to 2 razy większe, i nawet za duże dla czytającego - zakładając tą samą odległość.
Możemy do przykładu dodać trzecie urządzenie o rozdzielczości 1920x1080 i niech to będzie smartfon który jest bliżej niż oba monitory, a obiekt będzie za mały a czcionka zbyt mała do komfortowego czytania.
Dlatego nie projektuje się pod rozdzielczość, a pod DPI. Media queries nie jest złą koncepcją bo działa bardzo dobrze, ale trzeba rozumieć jak działa i jak jest implementowana. Nie wystarczy przeczytać artykułu “responsive web design” albo “skalowane strony internetowe” bo w 90% przypadków sami autorzy nie rozumieją mechanizmu media queries i tylko powielają głupoty, bez podania informacji dlaczego coś co jest wbrew logice działa. Lub co gorsza poruszą temat i wskoczą na jakiegoś bootstrapa.
1 polubienie
Media w css jest faktycznie jakimś rozwiązaniem. Tylko uzależniać wielość czcionki od media screen czy od media resolution? Bo teraz tak: na telewizorze FHD o przekątnej 32 cale, strona się na przykład dobrze wyświetla i wszystko jest czytelne, a na oko, to taki telewizor ma sporo mniejsze dpi, niż mój 21 calowy monitor 1680x1050px. Z kolei na mojej starej lumii 720 o rozdzielczości 480x800 i 217dpi, tekst również jest czytelny bez stosowania jakiegokolwiek @media query.
I pytanie dodatkowe: czemu tylko jest problem z czcionką. Reszta - divy, bloki, grafika i inne, są zdefiniowane za pomocą % lub vh,vh i one są dobrze wyświetlane, bez względu na rozdzielczość. Wiadomo, czasem są mniejsze, czasem są większe w zależności od rozmiaru wyświetlacza, ale są proporcjonalne.
Zainteresowanym mogę udostępnić kod css lub zrobić screeny z różnych urządzeń.