Komercyjnie
noskowicz.klaudia@gmail.com

lub

Potrzebujesz w czymś pomocy lub chcesz napisać w sprawie współpracy?
rinne.lasair@gmail.com

x

Responsywne szablony na witrynę blogspot, loga, grafika 3d, animacje oraz tutoriale.

x
+

Co będzie?

  • Responsywny szablon od zera instrukcja
  • Szablon jak strona instrukcja
  • Szablon do opowiadań
  • Szablon rpg

Szukaj

x

Jak dopasować szablon do każdej rozdzielczości?

Niedługo pojawi się aktualizacja tej instrukcji :>

>> kod który znajduje się poniżej wklejacie normalnie w css.
@media all and (min-width: szerokość ekranu px) and (max-width: szerokość ekranu px) {  twój kod css  }
all - ten element mówi nam, że @media są przeznaczone dla każdego z typów urządzeń, ponieważ dzięki tej funkcji możemy napisać oddzielny kod np. dla telewizora
min-width - minimalna szerokość ekranu
max-width - maksymalna szerokość ekranu
Przykład:
@media all and (min-width:1600px) and (max-width:1600px) {
#Blog1 { right:257px; }
.main-inner .column-left-inner { left:259px; }
}

>> jak widzicie w przykładzie, nie musicie kopiować całego kodu css, a jedynie to co wam się rozjeżdża, dodatkowo większość elementów będzie potrzebowała jedynie dopasowania z użyciem margin/right/left
>> żeby dopasować szablon do danej rozdzielczości najlepiej byłoby na niej pracować, dlatego też pamiętajcie, że możecie na swoim komputerze wymusić inną niż macie domyślną rozdzielczość. Wchodzicie w panel sterowania > wygląd i personalizacja > dopasuj rozdzielczość ekranu

>> niestety nie da się na swoim komputerze wymusić każdej rozdzielczości, dlatego z pomocą przychodni nam strona testsize.com Strasznie się można z tym namęczyć, chyba że ktoś ma dobre oko do pikseli :D

29 komentarzy:

  1. Kociak raczej inaczej to robi, ale z pewnością skosztuję Twojej rady. <3

    OdpowiedzUsuń
  2. Wspaniale wszystko odpisałaś! W ogóle jestem zachwycona tym, że ktoś mi wreszcie powiedział co i jak :) Bardzo pomocny i przydatny post ^^
    Na pewno się kiedyś odezwę, jeżeli będę miała problemy :D
    Pozdrawiam!
    Natx z lost souls

    OdpowiedzUsuń
  3. Hm...mam na to inny sposób, ale taki kodzik też jest dobry. :)

    OdpowiedzUsuń
    Odpowiedzi
    1. To co się nie dzielisz! :D Może jest prostszy i nie trzeba się tak męczyć? :D

      Usuń
  4. Rinne!
    Przychodzą Ci powiadomienia na maila?

    OdpowiedzUsuń
    Odpowiedzi
    1. Znaczy się o dodanym komentarzu?

      Usuń
    2. Piszę się maila czy meila?

      Usuń
    3. Avu nie umie polubić drugi raz... :(

      Usuń
    4. Przychodzą, a co, chciałaś pospamować? XD

      Zawiodłam się na tobie. Sądziłam, że kto jak kto, ale ty potrafisz polubić dwa razy...

      Usuń
    5. Avu chciała pospamować!

      Usuń
    6. Rinne? A masz naleśniki?

      Usuń
    7. Ja mam lody w lodówce i wiatrak, który na mnie wieje.

      Rinne? Masz lody?

      Usuń
    8. Dzięki Kociaku! :D Jakoś tak nie byłam pewna.

      Usuń
    9. Rinne! A wiesz, że mi się katalog rozjeżdża?
      Wysłać Ci screena?

      Usuń
    10. Znaczy się te ozdóbki. Nie, że cały. Tylko niektóre elementy.

      Usuń
    11. Napisz mi jaką masz rozdzielczość, to jeszcze dzisiaj to naprawię ^^

      Miałam naleśniki. Dobre były.

      Usuń
    12. 1920 x 1080

      Screena i tak masz, bo i tak go zrobiłam. :D
      Screeeeeeen!

      Usuń
    13. Dołączam do Avii. Ozdóbki na 1920x1080 się rozjeżdżają ;(

      Usuń
    14. December Dayt, a masz lody? Albo naleśniki?

      Usuń
    15. December Dayt, a masz lody? Albo naleśniki?

      Usuń
    16. December Dayt, a masz lody? Albo naleśniki?

      Usuń
  5. Ten komentarz został usunięty przez autora.

    OdpowiedzUsuń
  6. Ja zawsze dostosowuje szablon pozycjami. Niby dużo pracy przy tym, ale gdy już wiesz, jaką pozycje użyć do danego układu, to raczej się nigdzie nie rozjeżdża. Aczkolwiek ten sposób jest bardzo ciekawy, zapiszę go sobie i na pewno zastosuję :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Hmmm chyba rozumiem xD U mnie problem polega na tym, że dodaje divy w htmlu, bo jest ich za dużo, żeby dodawać w gadżecie html/js. Potem by było #HTML30 XD

      Usuń
  7. @media all and (max-width: 1024px) {
    body {
    width: 994px;
    margin: 0;
    padding: 0;
    }
    }


    @media all and (max-width: 1366px) {
    body {
    width: 1336px;
    margin: 0;
    padding: 0;
    }
    }

    itd.

    Czy taki zapis nie jest prostszy? Ustawiasz tylko dla body o 30px mniejszą stałą szerokość i gotowe. A jak wiemy, wszelakie pozycjonowania ustawią się z automatu pod body.
    Pozdrawiam, Raion.

    OdpowiedzUsuń

by Rinne Lasair | credits: helplogger