Responsive Webdesign

====== LU05.A03 - Webseite mobile freundlich umsetzen ====== ===== Ausgangslage ===== Als Ausgangslage dient ein dreispaltiges, flexibles Layout. Die Breite ist mit 960 Pixeln im ID-Selektor #page-wrapper festgelegt. Die restlichen Elemente sind mit relativen Werten (hier in Prozent) angegeben. {{:modul:m287:learningunits:lu05:anwendung_layout.png?600|}} ===== HTML-Grundgerüst ===== Als Grundlage für das Fallbeispiel dient das nachfolgende HTML-Gerüst:





    Responsive Webdesign
    
    
    



    Responsive Webdesign
    
        
            Navigation
            
                Home
                Blog
                Links
                About
                Kontakt
            
        
        
            
                
                    
                
                
                    Artikel 1
                    
                        Lorem ipsum dolor sit amet, consectetuer
                        adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
                        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
                        rhoncus ut.
                    
                
            
            
                
                    Artikel 2
                    Lorem ipsum dolor sit amet, consectetuer
                        adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                        penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
                        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                        Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
                        rhoncus ut.
                    
                
            
        
        
            Seitenleiste
            Lorem ipsum dolor sit amet, consectetuer
                adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
                penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
                ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
                Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
                rhoncus ut.
            
                Link 1
                Link 2
                Link 3
            
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        
    
    Fusszeile


* {
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
}

#page-wrapper {
    margin: auto;
    width: 960px;
}

header, footer {
    background: lightgreen;
    text-align: center;
    padding: 10px;
    width: 100%;
}

.main-content {
    display: flex;
}

.post-with-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

#mainnav {
    padding: 15px;
    width: 20%;
}

#sidebar {
    padding: 15px;
    width: 20%;
}

main {
    padding: 15px;
    width: 60%;
}

article img {
    margin: 0 10px 10px 0;
    max-width: 100%;
    height: auto;
    border: 3px solid black;
}

article {
    padding: 15px;
    margin-bottom: 5px;
    background: lightblue;
}

nav ul {
    padding-left: 0;
}

nav ul li {
    list-style: none;
    margin-left: 0;
}

===== Aufgabenstellung ===== * Analysieren Sie das Markup der Webseite und die Vorgabe der responsiven Ansicht (Bild in der Ausgangslage) * Setzen Sie die Tablet und Mobile Version der Webseite mit Media Queries um. Überlegen Sie sich dafür geeignete Breakpoints. Ergänzen Sie bei Bedarf das HTML. * Geben Sie Ihre Ergebnisse als ZIP-Datei ab. ===== Rahmenbedingungen ===== ^ Was ^ Beschreibung ^ | **Produkt:** | Webseite mit HTML und CSS | | **Zeit:** | 45 Min. | | **Sozialform:** | Einzel- oder Partnerarbeit | | **Arbeitsmittel:** | Entwicklertools, Browser |