>> 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; }
#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
Subskrybuj:
Komentarze do posta (Atom)
Kociak raczej inaczej to robi, ale z pewnością skosztuję Twojej rady. <3
OdpowiedzUsuńNadal nie wiem jak ;_;
UsuńWspaniale wszystko odpisałaś! W ogóle jestem zachwycona tym, że ktoś mi wreszcie powiedział co i jak :) Bardzo pomocny i przydatny post ^^
OdpowiedzUsuńNa pewno się kiedyś odezwę, jeżeli będę miała problemy :D
Pozdrawiam!
Natx z lost souls
Proszę bardzo! ^^
UsuńHm...mam na to inny sposób, ale taki kodzik też jest dobry. :)
OdpowiedzUsuńTo co się nie dzielisz! :D Może jest prostszy i nie trzeba się tak męczyć? :D
UsuńRinne!
OdpowiedzUsuńPrzychodzą Ci powiadomienia na maila?
Znaczy się o dodanym komentarzu?
UsuńPiszę się maila czy meila?
UsuńAvu nie umie polubić drugi raz... :(
UsuńMaila xD
UsuńPrzychodzą, a co, chciałaś pospamować? XD
UsuńZawiodłam się na tobie. Sądziłam, że kto jak kto, ale ty potrafisz polubić dwa razy...
Fuj! Nie tam...
UsuńTak!
Avu chciała pospamować!
UsuńRinne? A masz naleśniki?
UsuńJa mam lody w lodówce i wiatrak, który na mnie wieje.
UsuńRinne? Masz lody?
Dzięki Kociaku! :D Jakoś tak nie byłam pewna.
UsuńRinne! A wiesz, że mi się katalog rozjeżdża?
UsuńWysłać Ci screena?
Znaczy się te ozdóbki. Nie, że cały. Tylko niektóre elementy.
UsuńNapisz mi jaką masz rozdzielczość, to jeszcze dzisiaj to naprawię ^^
UsuńMiałam naleśniki. Dobre były.
1920 x 1080
UsuńScreena i tak masz, bo i tak go zrobiłam. :D
Screeeeeeen!
Dołączam do Avii. Ozdóbki na 1920x1080 się rozjeżdżają ;(
UsuńDecember Dayt, a masz lody? Albo naleśniki?
UsuńDecember Dayt, a masz lody? Albo naleśniki?
UsuńDecember Dayt, a masz lody? Albo naleśniki?
UsuńTen komentarz został usunięty przez autora.
OdpowiedzUsuń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ń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ń@media all and (max-width: 1024px) {
OdpowiedzUsuń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.