Lasair

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



>> 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 thoughts on “Jak dopasować szablon do każdej rozdzielczości?”

  1. 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 😀
    Pozdrawiam!
    Natx z lost souls

  2. 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…

  3. 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ę 😀

  4. 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

  5. @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.

Leave a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *