Tekst w module a widok w urzadzeniach mobilnych
Wyniki 1 do 10 z 10

Temat: Tekst w module a widok w urzadzeniach mobilnych

  1. #1
    Bywalec
    Dołączył
    30-12-2009
    Wpisy
    436
    Punkty
    13

    Domyślny Tekst w module a widok w urzadzeniach mobilnych

    Witajcie,

    mam pare modułów na stronie ( z tekstem h1), font jest duży bo taki dostałem projekt. Jak zrobic stylach (css) zeby napis skalowal na smartfonie (i tablecie) ale od rozdzielczości (czyli szerokości strony 800px font byl stały - 55px) a poniżej sie skalował do pola danego ekranu.
    Kombinowałem ze stylami typu: font-size:
    Kod HTML:
    <h1 style="font-size: 8.73vmin;
    line-height: 11vmin;">POMOC...</h1>
    
    <h1 style="font-size: 3.23vmax;
    line-height: 4.1vmax;>POMOC...</h1>
    ale to powoduje ze jak smartfonie tekst jest ok czyli cały sie mieści ale za to jest b.duzy na komputerze lub odwrotnie. (css na div, h1 z min-width: 200px nic nie daje tez).
    Macie jakis pomysł? zamieszczam screeny z kompa i z telefonu.
    https://imgup.pl/i/aF5x
    https://imgup.pl/i/aaLd
    Attached Images Attached Images

  2. Pani Reklamowa
    Pani Reklamowa jest aktywna
    Avatar Panny Google

    Dołączył
    19-08-2010
    Skąd
    Internet
    Postów
    milion
    Pochwał
    setki
  3. #2
    Senior Bazyl awatar
    Dołączył
    02-08-2008
    Skąd
    Skierniewice
    Wpisy
    7 431
    Punkty
    551

    Domyślny

    Cześć,

    - takie sprawy tylko z linkiem do konkretnej podstrony
    - na stronie powinien być tylko jeden H1. Raczej w artykule, a nie w module (choć czasem bywa)
    - reszta to media queries

  4. #3
    Wiarus siristru awatar
    Dołączył
    28-05-2009
    Skąd
    Szczecin
    Wpisy
    1 930
    Punkty
    211

    Domyślny

    Definiujesz rozmiar w viewport units. Raczej sugerowałbym by używać breakpoints dla media queries: https://responsivedesign.is/develop/...e-breakpoints/
    I w ten sposób określać rozmiary. Sam wykorzystuję tą metodę i definiuje rozmiar czcionki w rem.
    Na Forum pomagam bezpłatnie ad maiorem Joomla gloriam
    Mimo pomocy na forum nie dajesz rady? Potrzebujesz by ekspert "zrobił to" za Ciebie?
    Napisz do mnie na PW. Argentum et Aurum nie zawsze jest konieczne ;)

  5. #4
    Bywalec
    Dołączył
    30-12-2009
    Wpisy
    436
    Punkty
    13

    Domyślny

    dodalem
    Kod HTML:
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    /* Styles */
    }
    i font w remach ale dalej to samo,

  6. #5
    Senior Bazyl awatar
    Dołączył
    02-08-2008
    Skąd
    Skierniewice
    Wpisy
    7 431
    Punkty
    551

    Domyślny

    A ja dodałem to samo i u mnie działa!


    Cytat Wysłane przez Bazyl Zobacz wiadomość
    - takie sprawy tylko z linkiem do konkretnej podstrony

  7. #6
    Bywalec
    Dołączył
    30-12-2009
    Wpisy
    436
    Punkty
    13

    Domyślny

    juz dziala ale wtedy jak kod:
    Kod HTML:
    /* Smartphones (portrait and landscape) ----------- */
    @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    h1 {
      line-height: 40px;
      text-decoration: none;
      font-size: 32px;
      letter-spacing: 1px;
      font-weight: bold;
    }
    }
    dam na koncu pliku template.css templatki,

  8. #7
    Bywalec
    Dołączył
    30-12-2009
    Wpisy
    436
    Punkty
    13

    Domyślny

    Witam,
    jeszcze mam pytanko dot. modulów w Joomla,
    ukrywam moduły zależności od urządzenia (i rozdzielności) ccs-ach tym kodem:

    Kod HTML:
    @media only screen and (min-device-width : 1px) and (max-device-width : 1199px) {
    .modul-obrazek1{
    display: none;
    }}
    i dziala ok, ale to dziala tylko na urządzeniach mobilnych (przez komendę @media)

    a jak zrobic to samo ale w przypadku ze na PC np. zwężam myszką pole przeglądarki i nagle przy 1199 i mniej ten modul sie chowa,
    czyli tak jak przy mobilnych

    ?

  9. #8
    Wiarus siristru awatar
    Dołączył
    28-05-2009
    Skąd
    Szczecin
    Wpisy
    1 930
    Punkty
    211

    Domyślny

    Eh... zacznijmy od tego, że ten break point jest niepoprawny.
    On wskazuje, że dla rozdzielczości od 1px do 1199px przeglądarka ma zastosować zawarty niżej kod css.

    To nie jest poprawny break point. Zobacz poprawne tutaj: https://getbootstrap.com/2.3.2/scaff...tml#responsive

    Zwężanie okna przeglądarki by zobaczyć jak strona zachowuje się przy danej rozdzielczości jest niepoprawną weryfikacją... bo czy potrafisz ustawić szerokość widoku na np. 320px z dokładnością do px?
    Używaj narzędzi typu: http://quirktools.com/screenfly/

    Jeśli chcesz kontrolować widoczność modułów, to nie rób tego klasami (to tylko ich ukrywanie ale one się wciąż ładują... a po co?). Skorzystaj z tego rozszerzenia: https://www.regularlabs.com/extensio...dmodulemanager
    Pozwala ono m.in. kontrolować wyświetlanie modułu w zależności od urządzenia.
    Na Forum pomagam bezpłatnie ad maiorem Joomla gloriam
    Mimo pomocy na forum nie dajesz rady? Potrzebujesz by ekspert "zrobił to" za Ciebie?
    Napisz do mnie na PW. Argentum et Aurum nie zawsze jest konieczne ;)

  10. #9
    Bywalec
    Dołączył
    30-12-2009
    Wpisy
    436
    Punkty
    13

    Domyślny

    ok inaczej zapytam, załóżmy ze chce ukryć moduł na małym laptopie o rozdzielczości poniżej 1200 px,
    Kod HTML:
    @media (max-width: 1200px) {
    .modul-obrazek1{
    display: none;
    }}
    czy @media dziala tylko na mobilnych urz.?

    czy bedzie tez dzialalo na małym laptopie ?

    jaka jest róznica pomedzy:
    max-device-width:
    a
    max-width:
    ?

    oraz jaka pomiedzy
    @media only screen
    i samo
    @media

  11. #10
    Bywalec
    Dołączył
    30-12-2009
    Wpisy
    436
    Punkty
    13

    Domyślny

    ok,
    sprawdzilem a wiec:

    bez device, max-device-width

    czyli samo max-width
    daje taki efekt jak chce i na telefonach tez dziala (czyli nie musze uzywac device)

    natomiast @media only screen
    czy samo @media wyjadaje sie bez roznicy,

Podobne tematy

  1. Problem z menu na urzadzeniach mobilnych - rozwija sie ale jest nie wyświetla się
    przez ariel_matrix na forum Szablony, formatowanie wyglądu
    Odpowiedzi: 2
    Ostatni post/autor: 28-06-2017, 10:25
  2. Szablon dla urządzeń mobilnych
    przez Dakota na forum Szablony, formatowanie wyglądu
    Odpowiedzi: 2
    Ostatni post/autor: 27-10-2012, 10:05
  3. Allvideos a filmiki na urządzeniach mobilnych
    przez coliberek1 na forum Rozszerzenia - problemy z obsługą, zarządzaniem
    Odpowiedzi: 0
    Ostatni post/autor: 16-10-2012, 10:30
  4. JA Puirty II dostosowanie headeru do urzadzeń mobilnych
    przez wojnest na forum Szablony, wygląd, formatowanie
    Odpowiedzi: 1
    Ostatni post/autor: 12-06-2010, 08:28
  5. Za duże odstępy tekst <- obrazek -> tekst
    przez tomasz.007 na forum Administracja Joomla!
    Odpowiedzi: 1
    Ostatni post/autor: 03-09-2007, 20:24

Reguły pisania

  • Nie możesz zakładać nowych tematów
  • Nie możesz dodawać wypowiedzi
  • Nie możesz dodawać załączników
  • Nie możesz poprawiać swoich postów
  •