Witam,
Mam obsadzoną grafikę na stronie, który ma bardzo dużą szerokość. Na dużych monitorach ładnie wygląda, ale chciałbym ten sam layout dopasować do rozdzielczości mniejszych monitorów np w laptopie, bo nie mieści się. Jakiej mieszanki kodu CSS użyć, ażeby uzyskać taki efekt, żeby każdy element mieścił się na stronie? Parametr width ustawiać na % i do tego min i max?
szukaj za "responsive web design" - poczytaj co to jest i jakie techniki są stosowane.
pytanie zbyt ogólne, łatwiej by było odpowiedzieć widząc co masz
np mam zdjęcie o szerokości 1400px i wys 430px. i chcę, żeby całe wlazło na rozdzielczość matrycy od lapka ;) Pamiętając, że jest jakiś tam teks na tym backgroundzie-image.
A to jest obrazek <img /> czy jako tło css elementu? Twoje opisy nie mówią za wiele. Daj konkretny przykład, a jak nie chcesz to sobie sam poczytaj o wszystkim.
to jest jako tło w cssie. zaraz postaram się coś podać, tzn przykład :)
Możesz też zrobić 2 arkusze stylów i wybierać w zależności od rozdzielczości/platformy.
Wydaje mi się, że coś takiego też może załatwić sprawę, ale to kod z palca. Wieczorem coś wymyślę.
background-size: 100% 100%; max-width: 1530px; min-width: 930px;
Ola Nordmann napisał(a):
Możesz też zrobić 2 arkusze stylów i wybierać w zależności od rozdzielczości/platformy.
Panno Aleksandro - bredzisz. Wystarczy użyć media queries.
Wystarczy, ale kod w 2 arkuszach jest imho bardziej przejrzysty.
Tymbardziej, że przynajmniej ja wyświetlałbym inną treść w zależności od rozdziałki. Przyciski, w które łatwo trafić, krótsze wstępy do artykułów etc.
To jak poradzicie sobie np z odstępami pomiędzy poziomym menu? margin-left: 25px; :) i co zrobicie przy mniejszej rozdzielczości jak menu się nie zmieści w danym divie i rozjedzie się po za monitor? a tak jak mówiłem chodzi mi tylko o rozdzielczość matrycy w laptopie :) a co powiecie o media queries + transform:scale(0.5)?
Dlatego wszystkie odległości muszą być proporcjonalne.
IE nie lubi transform.
Na dwóch arkuszach stylu przyjemniej się pracuje i można swobodnie manipulować designem na mniejszą rozdziałkę bez żadnych zabaw z dostosowywaniem.
a jak będzie wyłączona obsługa JS w przeglądarce? a patrze, że Media Queries są kompatibilne z HTML4,5 i CSS 2,3. I nie potrzebują JS.
dlatego ja to robię bezpośrednio w PHP.
Oj widzę że Pan Ola nie przewidział wszystkich opcji. Jest też coś takiego jak zmiana okna przeglądarki, czy z każdą zmianą okna pojawi się nowy request ? Wg mnie troszkę to bezsensowne. Generowanie kilku wersji strony w phpie - dla różnych rozdzielczości ? radziłbym unikać tego. Stosowanie systemu
Wkładka JS/User-Agent->POST->Switch - i jeszcze rejestrowanie info o rozdziałce w sesji to już całkowite nieporozumienie. Piszę o tym wszystkim w taki sposób, bo wg mnie jest to zły nawyk - który ktoś być może sobie wyrobi. Po co zaprzęgać php, skoro jest css i js?
A dla autora pytania - polecam tylko poczytać o Responsive Design
kod który podałeś
background-size: 100% 100%;
będzie Ci źle skalował obrazki z proporcjami różnymi od 1:1
Tak jak pisał winerfresh - lepiej jest użyć media queries
http://css-tricks.com/css-media-queries/