Responsive Web Layout (Kein Header)

Question

Hier ist meine aktuelle Website-Layout in einem codepen.

Was wäre eine reaktionsfähigere Art der Codierung mit CSS, wo, wenn das Fenster in der Größe geändert wird, es nicht den Text aus der Hauptnavigation über. Auch, was ist eine bessere Möglichkeit, die CSS für das gleiche Layout ohne Padding zu codieren? Die Art, wie ich sie codiert habe, scheint einfach ineffizient zu sein. Ich verwende Medienabfragen, um die Kopfzeile unter 480px auszublenden und meinen mobilen Menüauslöser anzuzeigen, also keine Sorge. Ich frage mich nur, was ein besserer und reaktionsfähigerer Weg ist, dieses Layout zu erstellen.

Ich schätze und Rat oder Hilfe, und ich danke Ihnen im Voraus für Ihre Bemühungen. :)

HTML:

<div class="site-header"> 
<ul class="main-navigation"><li><a href="#">Overview</a> 
</li> 
<li><a href="#">Blog</a></li> 
<li><a href="#">About</a></li> 
<li><a href="#">Contact</a></li> 
</ul> 
</div> 

<div class="content"> 

<p> 
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 
</p> 

CSS:

.site-header { 
    display: inline-block; 
    top: 0; 
    left: 0; 
    right: 0; 
    width: 14%; 
    height: 100%; 
    float: left; 
    text-align: right; 
    position: fixed; 
    z-index: 1; 
    // border: 1px solid green; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
} 

.main-navigation { 
    position: absolute; 
    bottom: 40px; 
    left: 0; 
    right: 0; 
    cursor: default; 
    // border: 1px solid red; 
    list-style-type: none; 
} 

.content { 
    position: relative; 
    float: right; 
    // border: 1px solid yellow; 
    word-wrap: break-word; 
    white-space: normal; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
    width: 86%; 
    overflow: hidden; 
    padding-right: 10%; 
    padding-left: 10%; 
} 

Answer 1

Okay, ich liebe diese Art von Fragen, um zu sehen, weil es bedeutet, kümmern Sie genug, um zu fragen ... ja, hier ist Ihre erste Stunde.

Es scheint zu viel los mit Ihrem CSS. Das wichtigste, was Sie über ein responsives Layout wissen sollten, ist, dass das CSS immer "Mobile-First" sein sollte. Dies wird als "Progressive Enhancement" bezeichnet. Sie schreiben hauptsächlich das CSS, um das mobile Layout zu berücksichtigen - mit minimalen Breite-Haltepunkten (ca. 320px breit zum Starten), und dann, wenn das Anzeige-Ansichtsfenster größer wird - Sie "verbessern" das Layout.

Was Sie derzeit haben, ist ein modernes Beispiel, wie man es nicht angehen kann, und ist in erster Linie die Technik, um ältere Websites zu aktualisieren. Es wird auch als "Graceful Degradation" bezeichnet, die oft durch einen maximalen Breite-Breakpoint von 1280px bis 980px zum Starten gesteuert wird und Elemente außerhalb des Ansichtsfensters entfernt oder verschoben werden müssen, um Kollisionen oder Platzmangel zu vermeiden. Der Vorteil eines Mobile-First-Ansatzes besteht darin, dass Sie mit weniger "Unordnung" zu tun haben - Ihren Raum richtig zu nutzen, ihn dann hinzuzufügen und bestimmte Elemente neu auszurichten, um diesen Raum zu nutzen. Außerdem kannst du dein CSS ein wenig komprimieren, indem du es DRY hältst (was für "Do not Repeat Yourself" steht).

Wenn Sie Ihr Layout betrachten, macht es einfach keinen Sinn. Wenn überhaupt, möchten Sie, dass die Nutzer über alles verfügen, was sie benötigen, um auf der Website zu navigieren, bevor sie sie mit Inhalten präsentieren.

Versuchen Sie, den Code ein wenig zu beheben, und lassen Sie uns sehen, was Sie mit dem Rat tun können, den ich Ihnen gegeben habe. Dann werde ich deinen Stift abzweigen und wir können einen Schritt weiter gehen.