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

Pobieranie zawartości dokumentu w PX

+1 głos
68 wizyt
pytanie zadane 5 marca w JavaScript przez Patyczakus Nowicjusz (190 p.)

Witam, przychodzę z pytaniem jak mogę pobrać wartość dokumentu w px. Zamierzam przerobić po raz trzeci swą stronę internetową (ala pocztówka) i chciałbym dodać możliwość strony internetowej na telefon (więc nie wiem, czy kategoria oraz tagi są poprawne)

Specjalnie jest dana kategoria JavaScript, więc komentarze typu: "a nie możesz zrobić w CSS?" będą ignorowane.

O co mi dokładnie chodzi? Otóż jeżeli wartość w px będzie mniejsza/równa 500px, to wtedy dodaje do tagu <body> klasę "phone". Najlepiej, aby był pisany w czystym JS-ie, w ostateczności jQuery lub coś innego. Będę wdzięczny! laugh

1 odpowiedź

+2 głosów
odpowiedź 5 marca przez ScriptyChris Mędrzec (180,980 p.)

Specjalnie jest dana kategoria JavaScript, więc komentarze typu: "a nie możesz zrobić w CSS?" będą ignorowane.

Nie rozumiem skąd niechęć do użycia CSS, co wydaje się dość naturalne w takiej sytuacji, ale jak wolisz.


Możesz użyć metody matchMedia i property matches na zwróconym przez nią obiekcie, żeby sprawdzić czy dokument spełnia podane media query i wtedy nadać odpowiednią klasę. Przykład:

const mqList = window.matchMedia('(max-width: 500px)'); // ustaw regułę

if (mqList.matches) { // sprawdź czy reguła jest spełniona
  document.body.classList.add('phone'); // nadaj klasę
}

 

komentarz 5 marca przez Patyczakus Nowicjusz (190 p.)
Dziękuję za odpowiedź

A co do CSS - @media nie działa u mnie najlepiej, więc jest spowodowane użyciem JS-a. Jeszcze miałem plan oddzielenia poszczególnych elementów, a klasą według mnie łatwiej zrobić.

Ale każdy ma swe koncepcje i swe pomysły, nie można komuś też za dużo narzucać.
komentarz 5 marca przez ScriptyChris Mędrzec (180,980 p.)

A co do CSS - @media nie działa u mnie najlepiej

Może więc najpierw spróbuj rozwiązać ten problem, a dopiero potem szukaj rozwiązania na około? ;) Twoja obecna sytuacja wygląda mi na tzw. problem XY.

komentarz 5 marca przez Patyczakus Nowicjusz (190 p.)

Jak można przeczytać ze strony:

After much interaction and wasted time, it finally becomes clear that the user really wants help with X, and that Y wasn't even a suitable solution for X.

Jest to fałszem, Y (czyli wersja z JS-em) jest dla mnie odpowiednia. Fakt, da się zrobić w CSS (inaczej X), ale chyba wolę mieć oddzielną klasę od tego niż podpinać @media i tylko się zastanawiać, czy będzie wszystko dobrze. Ale wezmę i spróbuję też i z rozwiązaniem tego problemu.

Podobne pytania

0 głosów
2 odpowiedzi 124 wizyt
0 głosów
1 odpowiedź 96 wizyt
pytanie zadane 11 czerwca 2019 w Urządzenia mobilne przez Pieseł_15 Nowicjusz (120 p.)
0 głosów
1 odpowiedź 502 wizyt
pytanie zadane 17 lutego 2016 w PHP przez jk_kord Bywalec (2,950 p.)

88,328 zapytań

136,921 odpowiedzi

305,575 komentarzy

58,600 pasjonatów

Motyw:

Akcja Pajacyk

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

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...