[pneumokok]

Mireczki, jakieś dobre gotowce #webdev mobilnych wersji stron? Generalnie niektóre z grafik które są prezentowane mają prawie 1000px, ale mają wyglądać fajnie na tabletach i telefonach. Jakieś pomysły?

[zwierzak40]

@pneumokok: Co konkretnie chcesz osiągnąć? Opcji masz kilka, np.
- max-width 100% dla img
- jakiś "filtr" po stronie serwera serwujący obrazki odpowiednio zmniejszone w zależności od rozdzielczości (np. Google pagespeed dla Apache i nginx)
- napisać skrypt, który wyświetla obrazek w zależności od rozdzielczości (ale tylko gdy responsywność jest skokowa, a nie płynna) oraz skrypt, który zmniejsza oryginalny do rozmiarów dla tych mniejszych...

Pierwsza opcja - masz po 5 sekundach,

[pneumokok]

@zwierzak40: zobacz co jest teraz z mobajla. :-)
to odpowie na wszystkie pytania.

[zwierzak40]

@pneumokok: Okej, ale i tak nie wiem co chcesz osiągnąć.
Ja bym pewnie zrobił to tak, że dla #container dałbym 100%, zamiast 960px jak zrobiłeś.
Potem kontenery obrazków także 100%
I img:
max-width:100%;
height:auto;

Efektem będzie strona, której szerokość jest taka, jak wyświetlacza urządzenia. Obrazki są nie większe niż szerokość ekranu i automatycznie, proporcjonalnie zmniejszają się do szerokości urządzenia. A jak sobie ktoś zapisze, czy "otworzy" obrazek, to zobaczy jego pełnowymiarową

[zwierzak40]

@pneumokok: Obrazki będą się zmniejszały jak tutaj to video:
http://webdesignerwall.com/demo/responsive-css-tricks/

[pneumokok]

@zwierzak40: a da się w tych nowych css'ach (dupa ze mnie a nie webdev) zrobić tak, by to o czym piszesz było tylko dla mobajla?
bo strona na pc wygląda teraz ok.

[pneumokok]

@zwierzak40: o, mega ciekawy link!

[zwierzak40]

@pneumokok: Zapoznaj się z @media, konkretnie przykład:
@media (min-width: 1200px) {
a {
color:#000;
}
}

= linki na urządzeniach o szerokości min. 1200px będą czarne

Przy czym za pomocą @media możesz uzależnić CSS nie tylko od szerokości, odsyłam do:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

I zapisz sobie http://www.w3schools.com/ i naucz się z niego korzystać. Na 99% pytań, jakie będziesz chciał zadać znajdziesz tam odpowiedź. Ale w razie problemów wołaj. :)

Przy okazji:

[pneumokok]

@zwierzak40: dzięki, będę testował!
ilość wolnego czasu pozwala tylko na metodę prób i błędów ;-)

[Jurigag]

@zwierzak40: ta druga opcja ma jedną mega poważną wadę - zmniejszanie obrazków do ich rozmiarów dalej nie działa przy obrazkach z kanałem alpha :P