• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Dostosowanie strony do monitora HD i FHD

VPS Starter Arubacloud
0 głosów
174 wizyt
pytanie zadane 11 maja 2017 w HTML i CSS przez kevin Mądrala (5,010 p.)
Witam!

Czy jeżeli chcę napisać stronę to koniecznie potrzebuję monitora FHD żeby ją przystosować ? Rozmiary menu i innych elementów mam w jednostkach px i logiczne jest że jeżeli dla HD mam diva 250px to dla FHD też on będzie miał 250px ale z powodu wyższej rozdzielczości będzie on mniejszy bo to więcej pixeli na tej samej powierzchni w przypadku monitorów o tej samej ilości cali. Jak sobie z tym radzić ? Powinienem uwzględnić to poprzez @media i dla każdej rozdzielczości dać inne rozmiary divów ?

2 odpowiedzi

+1 głos
odpowiedź 11 maja 2017 przez niezalogowany
Wejdź sobie w Developer Tools i tam w Toggle device toolbar (Ctrl + Shift + M) możesz testować sobie różne rozdzielczości.
komentarz 11 maja 2017 przez kevin Mądrala (5,010 p.)
Rozumiem że tam ustawiam sobie rozdzielczość i skaluję stronę tak aby cała jej szerokość mieściła mi się na ekranie ?
0 głosów
odpowiedź 11 maja 2017 przez Lu Kiss Dyskutant (7,600 p.)
spróbuj na to spojrzeć inaczej

zamiast 250px wykorzystaj 25%

pracuję nad fajnym projektem i tylko w kilku elementach mam w px ustawioną wysokość, lub max-width

przykład - gabinety.deos.pl
komentarz 11 maja 2017 przez kevin Mądrala (5,010 p.)
Korzystając z Ctrl + Shift + M zwiększa się mi obszar roboczy a nie pokazuje to czytelności elementów... Przy rozmiarze czcionek też takie coś działa ? Używając % mam stu procentową pewność że strona czytelna na rozdzielczości HD będzie równie czytelna na rozdzielczości FHD ? % co do szerokości strony to jestem w stanie to sobie wyobrazić ponieważ szerokość jest albo dla HD albo FHD ale wartość procentowa dla elementu  np. height: 25% odnosi się do diva który zawiera ten element a ten odnosi się do całej strony a na wysokość całej strony wpływa kilka innych elementów które mają wysokość procentową czyli w pewnym sensie zależną od innych elementów, wniosek ? Jak to ogarnąć ? Ustawić diva width: 100% ( dla HD i FHD ) i np. height: 1000px i poustawiać elementy w tym divie żeby były czytelne ?
komentarz 11 maja 2017 przez Lu Kiss Dyskutant (7,600 p.)
zależy co chcesz zrobić :)

są różne sposoby na ustawianie wysokości elementu - vh / padding

dla fontów zastosuj np em

jeśli stosujesz media queries to prosty zabieg wystarczy zastosować

body {font-size: 120%} i wszystkie fonty się powiększą
komentarz 12 maja 2017 przez kevin Mądrala (5,010 p.)
W sensie ? Brzmi to tak jakby jedno rozwiązanie pasowało tylko i wyłącznie do jednego przypadku... em? Stosując em i ustawiając rozmiary poprzez padding mam tę skalowalność bo wtedy rozmiar elementu zależy od rozmiaru czcionki i wielkości elementu. Ale czy ustawienie rozmiaru czcionki poprzez em automatycznie zmieni mi jej wielkość kiedy ktoś ma monitor FHD ? Powoli zaczynam się obawiać że początkujący musi mieć monitor obsługujący wszystkie rozdzielczości żeby nie budzić się w nocy z powodu obaw o nieczytelną stronę w FHD... Ale nawet jak w media ustawię font-size: 120% to te 120% muszę skądś wziąć
komentarz 12 maja 2017 przez Lu Kiss Dyskutant (7,600 p.)
Obawiasz się nie istniejącego problemu, a co w takim razie na Mac gdzie masz 2x pikseli ? rozdzielczość np 2880px, a jak ktoś ma monitor 4k? albo UHD?

Projektujesz stronę na szerokość 1400px i tyle. jak ktoś ma większy ekran to ma więcej pustej przestrzeni po bokach.

Font o wielkości 1em (Twoje 100%) czyli 16px jest tak samo czytelny na smartfonie 4' jak i na ekranie FHD.
komentarz 14 maja 2017 przez kevin Mądrala (5,010 p.)
Właśnie o to chodzi, ja nie mam doświadczenia nie wiem co i jak i mam wątpliwości tego typu... mam stronę na width: 1200px na fhd będzie więcej miejsca po bokach. Ale martwi mnie ta czytelność... w body dla hd mam font-size 100% dla fhd np. 120% elementy co mają ustawiony padding zmienią swój rozmiar po zmianie wielkości czcionki. Font o wielkości 1em czyli moje 100%, nie bardzo rozumiem. Gdzieś muszę jakieś odniesienie do tego em wstawić żeby 1em to było 16px ? Skąd przeglądarka ma wiedzieć że 1em to 16px a nie 26px ?

Podobne pytania

0 głosów
0 odpowiedzi 106 wizyt
pytanie zadane 9 kwietnia 2019 w Sprzęt komputerowy przez Ravn Nowicjusz (240 p.)
0 głosów
0 odpowiedzi 461 wizyt
0 głosów
0 odpowiedzi 275 wizyt
pytanie zadane 16 października 2022 w Sprzęt komputerowy przez domelcio Użytkownik (960 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...