Powiedzmy, że mam już zrobioną całą stronę. A teraz jak zrobić, aby przy większej rozdzielczości, wszystko na stronie powiększało się, a przy mniejszej zmniejszało? Moja strona ma szerokość 900px. Przy oglądaniu strony na np. telewizorze strona musi mieć większą szerokość, ale elementy muszą mieć ten sam dystans między sobą jak tu: http://www.groj.pl (zobacz, że wszystkie elementy przy zoomowaniu nie jeżdzą, a zwiększają się lub zmniejszają - taki efekt mnie cieszy)
-
Działasz na % czyli np.: div{ width: 70%; } To wtedy zawsze div będzie miał 70% swojego rodzica.
-
Media Queries np.:
<- To jest akurat dla komórek, smartfonów. No i zmniejsz sobie przeglądarkę do 420px i ostyluj ją odpowiednio pod te urządzenia. Kliknij.Teraz chciałbyś naprzykład do urządzeń 640x360 to dodajesz takie coś do sekcji head
Czyli będzie działało, gdy wszystko wstawię do jednego diva i nadam mu?:
min-width: 20%;
max-width: 90%;
Poczytaj w necie nt. stron responsywnych (Responsive Web Design), np. http://www.footstep.pl/blog/strona-responsywna-tutorial