Czym jest responsywne projektowanie?

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 61 z 76.

W projektowaniu stron internetowych projektowanie responsywne to podejście, którego celem jest tworzenie stron internetowych dostosowujących się do różnych urządzeń i zapewniających optymalne wrażenia podczas przeglądania na szerokiej gamie urządzeń — od monitorów komputerów stacjonarnych po telefony komórkowe. Responsywna strona internetowa automatycznie dostosowuje swój układ, treść i funkcjonalność do rozmiaru ekranu, rozdzielczości i orientacji urządzenia, na którym jest wyświetlana. Celem projektowania responsywnego jest zapewnienie użytkownikom łatwego dostępu do strony internetowej i możliwości interakcji z nią niezależnie od używanego urządzenia.

Responsywność projektu osiąga się za pomocą kombinacji technik, w tym:

Elastyczne siatki i układy: używanie CSS Grid lub Flexbox do tworzenia układów, które mogą dostosowywać się do różnych rozmiarów ekranu.

Elastyczne obrazy i multimedia: Zapewnianie, że obrazy i inne multimedia skalują się proporcjonalnie do układu.

Zapytania o media: Stosowanie różnych stylów CSS w zależności od cech urządzenia, takich jak szerokość i wysokość ekranu oraz jego orientacja.

W miarę jak coraz więcej osób korzysta z urządzeń mobilnych do przeglądania internetu, projektowanie responsywne jest niezbędne, aby strony internetowe były łatwe w obsłudze. Dzięki niemu Twoja witryna dobrze wygląda i działa na każdym urządzeniu, zapewniając użytkownikom płynne i spójne doświadczenie.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z nagłówkiem (<h1>), akapitem (<p>) i dwoma obrazami (<img>). Twoim zadaniem jest dodanie podstawowego CSS, aby elementy były responsywne i wyraźnie pokazywały różnicę między stałą wysokością a automatyczną wysokością. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <h1>. Ustaw rozmiar czcionki na 5vw. Dzięki temu rozmiar czcionki nagłówka będzie dostosowywać się do szerokości widocznego obszaru.
Napisz regułę CSS, która wybiera element <p>. Ustaw rozmiar czcionki na 3vw. Dzięki temu rozmiar czcionki akapitu będzie dostosowywać się do szerokości widocznego obszaru.
Napisz regułę CSS, która wybiera klasę .fixed-height. Ustaw szerokość na 100% i wysokość na 150px. Wymuszenie stałej wysokości spowoduje zniekształcenie obrazu.
Napisz regułę CSS, która wybiera klasę .auto-height. Ustaw szerokość na 100% i wysokość na auto. Dzięki temu obraz będzie skalowany proporcjonalnie, z zachowaniem proporcji.
Napisz reguły CSS dla kontenerów (.container), aby ustawić ich szerokość na 300px, obramowanie na 2px solid #ccc, margines na 20px i dopełnienie na 10px.

Spróbuj swoich sił

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>