# Jak dostosować stronę do urządzeń mobilnych HTML?
## Wprowadzenie
W dzisiejszych czasach coraz więcej osób korzysta z urządzeń mobilnych, takich jak smartfony i tablety, do przeglądania stron internetowych. Dlatego ważne jest, aby strony internetowe były dostosowane do tych urządzeń, aby zapewnić użytkownikom optymalne doświadczenie. W tym artykule dowiesz się, jak dostosować stronę do urządzeń mobilnych przy użyciu HTML.
## 1. Responsywny design
Responsywny design jest kluczowym elementem dostosowania strony do urządzeń mobilnych. Oznacza to, że strona automatycznie dostosowuje się do różnych rozmiarów ekranów, aby zapewnić czytelność i funkcjonalność na każdym urządzeniu. Aby osiągnąć responsywność, możemy użyć kilku technik w HTML.
### 1.1 Media queries
Media queries pozwalają nam dostosować wygląd strony w zależności od rozmiaru ekranu. Możemy ustawić różne style CSS dla różnych rozmiarów ekranów, na przykład dla smartfonów, tabletów i komputerów. Przykładem media query może być:
„`html
@media screen and (max-width: 768px) {
/* style dla smartfonów */
}
„`
### 1.2 Fluidne jednostki
Aby zapewnić elastyczność elementów na stronie, możemy użyć fluidnych jednostek, takich jak procenty, zamiast pikseli. Dzięki temu elementy będą się skalować proporcjonalnie do rozmiaru ekranu.
„`html
„`
## 2. Optymalizacja obrazów
Obrazy są często jednym z największych czynników wpływających na wydajność strony. Aby dostosować stronę do urządzeń mobilnych, musimy zadbać o optymalizację obrazów.
### 2.1 Skalowanie obrazów
Ważne jest, aby obrazy były skalowane proporcjonalnie do rozmiaru ekranu. Możemy to osiągnąć, ustawiając maksymalną szerokość obrazu na 100%:
„`html
„`
### 2.2 Kompresja obrazów
Kompresja obrazów jest również istotna dla wydajności strony. Możemy skompresować obrazy, aby zmniejszyć ich rozmiar bez utraty jakości. Istnieje wiele narzędzi online, które pomogą nam skompresować obrazy, na przykład TinyPNG.
## 3. Używanie odpowiednich tagów HTML
Aby dostosować stronę do urządzeń mobilnych, musimy używać odpowiednich tagów HTML. Oto kilka przykładów:
### 3.1 Meta tag viewport
Meta tag viewport pozwala przeglądarce na odpowiednie skalowanie strony na różnych urządzeniach. Możemy dodać ten tag do sekcji head naszej strony:
„`html
„`
### 3.2 Tagi semantyczne
Używanie tagów semantycznych, takich jak `
