Co to jest elastyczne projektowanie stron internetowych

• Kwiecień 29, 2024

Istnieją trzy główne cechy responsywnego projektu internetowego, którymi są płynne układy, obrazy o zmiennym rozmiarze i zapytania o media. Zapytania o media nie są tak naprawdę nowe w projektowaniu stron internetowych. Począwszy od typów mediów w CSS2.1, moglibyśmy projektować arkusze stylów zarówno dla Internetu, jak i dla drukowania, nieco zapewniając, że strona będzie wyglądać tak samo na ekranie i po wydrukowaniu. To przekształciło się w zapytania o media w CSS3. To zapytanie sprawdza szerokość urządzenia multimedialnego (maks. Szerokość urządzenia) i testuje go pod kątem ustawionej wartości, takiej jak 480px lub 768px. W odpowiedzi na to zapytanie używamy stylów CSS do zmiany układu płynów i zmiany rozmiaru obrazów na ekranie.

Możesz łatwo przetestować, czy witryna ma responsywny wygląd. Zacznij od przeglądarki na pełnej szerokości ekranu komputera. Następnie przeciągnij prawą krawędź przeglądarki w lewo, aby zmniejszyć szerokość okna przeglądarki. Powinieneś zobaczyć, że obrazy stają się mniejsze, a układ bierze pływające div, które są obok siebie i układa je pionowo. Na przykład, jeśli mamy sześć obrazów (sześć dywizji) na wiersz na stronie galerii na pełnym ekranie, ponieważ zmniejszamy szerokość ekranu, liczba obrazów w rzędzie jest stopniowo zmniejszana i układana, stosownie do potrzeb. Gdy szerokość zostanie zmniejszona do określonej wielkości, same obrazy zaczną się zmniejszać. Jeśli przyjrzysz się uważnie, zobaczysz również, że niektóre elementy projektu, takie jak łącza nawigacyjne, mogą zostać zredukowane do ikony, a nawet zniknąć. Jest to również kontrolowane przez arkusz stylów CSS.

Projektując strony internetowe, należy wziąć pod uwagę nie tylko to, jak elementy projektu strony będą wyglądały na pełnej szerokości ekranu, ale także to, jak będą wyglądały po ułożeniu w stos. Zastanów się, jakie elementy projektu można usunąć z ekranu przy mniejszej szerokości ekranu bez zmniejszania funkcjonalności strony internetowej. Ponieważ funkcje i technologia szybkiego reagowania zmieniają się szybko, nadążanie za wszystkimi ulepszeniami może być czasochłonne. Jeśli wolisz spędzać czas na projektowaniu zamiast na programowaniu, spójrz na niektóre z pięknych responsywnych motywów dostępnych dla Wordpress. Jeśli jesteś małą firmą projektową, możesz rozważyć rozpoczęcie od jednego z tych responsywnych układów motywów podczas projektowania stron internetowych.

Instrukcje Wideo: Jak zacząć tworzenie projektu strony www (Kwiecień 2024).