HTML/CSS pozycjonowanie i responsywność (dobre praktyki)

Question

Witam.

Kupiłem ostatnio szablon w PSD i pociąłem go na pojedyncze elementy i grafiki. Wszystko ok tylko ,że szablon dostałem w jednej statycznej rozdzielczości 1100px, a chcę uczynić stronę responsywną. Tło jest pozą tą rozdzielczością i zajmuje 100% szerokości ekranu z tym ,że na tle napisy są białe ,a poza czarne.

Problem w tym ,że tło się skaluje i zajmuje w zależności od rozdzielczości inne pozycje.

Znam instrukcje warunkowe Media Queries ale mam parę wątpliwości co do wy pozycjonowania elementów na stronie. Bo jak na jednej rozdzielczości jest dobrze tak na innej elementy są w zupełnie innych miejscach.

Po drugie jak upakować wszystko na rozdzielczości < 400. Znacie jakieś dobre praktyki z użyciem siatki 12 kolumn (SkeletonFramework)? Nie wybrałem łatwego szablonu do odwzorowania bo wiele elementów trzeba pozycjonować relatywnie ,niektóre wymagają dużego marginesu, a inne pojawiają się wszędzie tylko nie tam gdzie trzeba.

Pytanie kieruję do bardziej doświadczonych front-end deweloperów. Znacie jakieś dobre praktyki tworzenia responsywnych stron w HTML?

Answer 1

Tak na szybko - Zostaw te wszystkie skeletony, bootstrapy, 12 kolumnowe siatki itd i naucz się dobrze CSSa. Jak będziesz dobrze ogarniał grida i flexa to łatwiej i szybciej będzie ci stworzyć layout czystym CSSem niż tymi frameworkami. Używaj rem zamiast pikseli i przestawiaj font-size dla różnych rozdzielczości. Media queries używaj w ostateczności. Naucz się jakiegoś preprocessora od siebie polecam SCSS.

Problem w tym ,że tło się skaluje i zajmuje w zależności od rozdzielczości inne pozycje.

background-position