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

CSS - rozdzielczość na różnych komputerach

VPS Starter Arubacloud
0 głosów
1,107 wizyt
pytanie zadane 16 lipca 2016 w HTML i CSS przez Chisorq Obywatel (1,680 p.)
Hejka, robie swój projekcik żeby poćwiczyć PHP, CSS itp. Wrzuciłem go sobie na hosting, żeby porozsyłać znajomym żeby zobaczyć czy u nich strona się nie sypie. (pierwszy raz robie stronkę nie pod localhosta więc z góry proszę o zrozumienie)

Jak wiadomo, komputery inne niż mój, mają inną rozdzielczość ustawioną. Jedne są większe, drugie mniejsze na słabsze sprzęty - no i na tych mniejszych rozdzielczościach stronka jest trochę posypana. Przez jakimkolwiek ruszaniem tego chciałbym zapytać jak postępuje się w takich przypadkach - czy robi się oddzielne cssy na różne rozdzielczości, czy w tym jednym używać jak najmaniej określania wielkości w pikselach i zastąpić je procentami żeby to się nie sypało. Jak rozwiązać ogólnie konflikt z różnymi rozdzielczościami w komputerach użytkowników? Dzięki z góry.

4 odpowiedzi

+1 głos
odpowiedź 17 lipca 2016 przez CzikaCarry Szeryf (75,340 p.)
wybrane 26 lipca 2016 przez Chisorq
 
Najlepsza

czy w tym jednym używać jak najmaniej określania wielkości w pikselach i zastąpić je procentami żeby to się nie sypało

Ja osobiście jeśli robię strony responsywne (bo tak nazywa się technika robienia stron które mają się nie sypać) , to używam tylko i wyłącznie jednostek takich jak %, em, vh, vw, vmin, vmax. Po krótce Ci o nich opowiem:

% - chyba nie muszę tłumaczyć

em - jest to wielkość czcionki rodzica lub danego elementu.

Czyli jeśli mamy zapis:

.div 
{
 font-size: 15px;
 height: 2em;
 }

to wysokość elementu .div jest równa 2*15px=30px;

vh (vievport height) - jednostka ta jest równa 1% wysokości okna przeglądarki, Czyli jeśli chcemy mieć element który będzie miał wysokość 20% wysokości ekranu, to dla tego elementu dajemy

height: 20vh;

vw (vievport width) - jednostka ta jest równa 1% szerokośći okna przeglądarki, analogicznie do vh jeśli chcemy mieć element który będzie miał 80% szerokości ekranu, to dla tego elementu dajemy

vmin - jest to vh lub vw w zależności od tego które jest mniejsze. Jednostka ta jest szczególnie przydatna, gdy chcemy uzyskać takie same proporcje elementów, czcionek, marginesów na urządzeniach mobilnych, które mogą przeglądać stronę w orientacji pionowej lub poziomej.

vmax - jak wyżej, vh lub vw, tyle, że w zależności od tego które jest większe.

W projekcie, który teraz robię ani razu nie użyłem jednostki px! Naprawdę, bez pixeli da się żyć, a w dodatku można sobie na szybko policzyć ile px to 1vh w oknie naszej przeglądarki. Wysokość okna mojej przeglądarki jest równa około 1000px. Aby policzyć, ile px to vh musimy podzielić wysokość przez 100. 1vh=1000px/100=10px. Analogicznie robimy z vw oczywiście :)

komentarz 17 lipca 2016 przez manjaro Nałogowiec (37,390 p.)
edycja 17 lipca 2016 przez manjaro
No i następny to samo. To jest tylko teoria, jak można robić. Ale pytanie jest jak konkretnie w praktyce to robicie. Czy ustawiacie raczej vh czy też może vw? I które elementy? Proszę o wasze praktyki a nie teorię.
1
komentarz 17 lipca 2016 przez CzikaCarry Szeryf (75,340 p.)
No to tak: Dla wielkości fontow używam vmin aby zachowywały proporcje na pc i urządzeniach mobilnych w obu orientacjach. Dla wysokości vh/vmin, dla szerokości vw/vmax, dla marginesów wertykalnych vh/vmin, dla marginesów horyzontalnych vw/vmax/%, z paddingami tak samo jak z marginesami, dla letterr spacing daję vw/vmax/%, dla borderow tak samo jak dla marginesów, dla border radius %.
komentarz 17 lipca 2016 przez CzikaCarry Szeryf (75,340 p.)
A tak poza tym to chyba pierwszego akapitu mojej wypowiedzi nie przeczytałeś jeśli mówisz, że nie powiedziałem nic o praktyce...
komentarz 17 lipca 2016 przez manjaro Nałogowiec (37,390 p.)
O właśnie i o takie odpowiedzi chodzi. Aby poznać dobre praktyki i uczyć się od najlepszych.
0 głosów
odpowiedź 16 lipca 2016 przez kubaapk Nałogowiec (44,270 p.)

jak najmaniej określania wielkości w pikselach i zastąpić je procentami

poczytaj jeszcze o innych jednostkach, em, rem, vh, vw, staraj się unikać ustawiania sztywno px.

https://developer.mozilla.org/en-US/docs/Web/CSS/length

 

Jak rozwiązać ogólnie konflikt z różnymi rozdzielczościami w komputerach użytkowników?

Media queries Ci w tym pomogą. https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries

 

porozsyłać znajomym żeby zobaczyć czy u nich strona się nie sypie

A to możesz sprawdzić sam sprawdzić. Otwórz devtoolsy (f12) i przejdź na widoki mobilne. Taka ikonka z tabletem i telefonem (ctrl + shift + m) i tam się pobaw ustawieniami ;).

 

 

 

1
komentarz 17 lipca 2016 przez manjaro Nałogowiec (37,390 p.)

poczytaj jeszcze o innych jednostkach, em, rem, vh, vw, staraj się unikać ustawiania sztywno px.

Zapewne nie chodziło mu o czym ma poczytać tylko o to jakie konkretnie metody stosują inni.

0 głosów
odpowiedź 17 lipca 2016 przez Yoyo Użytkownik (710 p.)
Zapoznaj się z Bootstrapem i z jego Grid System.

http://getbootstrap.com/css/#grid

Wtedy strona będzie się wyświetlała tak jak chcesz na różnych rozdzielczościach.
–1 głos
odpowiedź 16 lipca 2016 przez niezalogowany
Poczytaj o RWD, czyli o responsywności. :)

Podobne pytania

0 głosów
2 odpowiedzi 1,476 wizyt
0 głosów
1 odpowiedź 212 wizyt
pytanie zadane 13 września 2018 w HTML i CSS przez wordes94 Użytkownik (670 p.)
0 głosów
1 odpowiedź 173 wizyt
pytanie zadane 3 kwietnia 2017 w HTML i CSS przez babiak Obywatel (1,810 p.)

92,840 zapytań

141,781 odpowiedzi

320,856 komentarzy

62,172 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

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!

...