Responsives Design

  • CSS

Es gibt 18 Antworten in diesem Thema. Der letzte Beitrag () ist von Murdock.

    Responsives Design

    Gute Nacht,
    ich habe mich gerade etwas in Responsives Design eingelesen und frage mich, ob Media queries die beste Lösung dafür ist?
    Außerdem habe ich noch nicht verstanden wie das ganze funktioniert. Könnte mir das vielleicht jemand genauer erklären? Wenn man die Seite für jede Display Größe extra machen müsste würde das doch ewig brauchen?

    Danke schonmal
    mit freundlichen Grüßen
    Catchthebird

    Du machst ja nicht für jede Display Größe eine extra Seite?
    Mit den Media Queries kannst du bestimmte Sachen anpassen, z.b. ein Logo das nur bei bestimmter größe sichtbar ist usw..

    Das Grundgerüst für responsive design ist ein sog. grid system, z.b. von Bootstrap
    getbootstrap.com/css/#grid

    Damit kannst du komplett responsive homepages erstellenn

    CatchTheBird schrieb:

    [...]frage mich, ob Media queries die beste Lösung dafür ist?
    Außerdem habe ich noch nicht verstanden wie das ganze funktioniert.

    Lustig, etwas beurteilen zu können, ohne es verstanden zu haben :)
    Was wären dann die anderen möglichen Lösungen?

    Mit Media Queries kannst du ja mehrere Bildschirmtypen zusammenfassen, so das du nicht für jede mögliche Displaygröße was machen musst. Ansonsten muss man immer überlegen ob Responsive Design überhaupt in Frage kommt. Bei einer einfachen informativen Website sicherlich ein guter Ansatz, aber wenn man an eine Rich Internet Application (oder wie auch immer das Marketing Buzzwort dafür gerade auch lauten mag) denkt, sollte man vielleicht eine eigenständige Seite erstellen.

    Naja ich hatte eigentlich vor eine Webseite für den PC und dann eine komplett umgebaute für die Smartphones zu machen.
    ich verstehe Bootstrap nicht ganz.. Ich mein was ist der Sinn von diesem Framework? Es hat schon Standard Designs. Ich meine für was lernt man das CSS wenn man mit Bootstrap schon vorlagen hat?


    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von „CatchTheBird“ ()

    CatchTheBird schrieb:

    Ich meine für was lernt man das CSS wenn man mit Bootstrap schon vorlagen hat?

    Ich könnte genauso gut fragen, wozu man Programmieren lernt, wenn es doch Frameworks gibt.

    Es ist halt ein Framework; bei manchen Sachen wird man unterstützt bei anderen nicht. Vielleicht entspricht es ja nicht den persönlichen Anforderungen/Geschmack und man nimmt ein anderes oder es ist einfach zu überladen, so dass man es nicht verwenden will. Du musst es natürlich auch richtig anwenden und es bietet garantiert nicht all das, was du benötigst. Also genug Gründe CSS zu lernen ; )

    Du hast in einem anderen Thread geschrieben, dass du vielleicht Informatik studieren möchtest. Dann sollte deine Frage nicht "Wozu braucht man das?" lauten, sondern eher "Wie und warum funktioniert das?".

    also um css kommst du sowiso nicht rum ... ka was das mit boostrap zu tun hat.
    um ein framework (wie bootstrap) benützen zu können muss man schon die script/design/programmier sprache beherschen auf die das framework aufbaut.
    außerdem hat boostrap soweit ich weiß keine vorlagen - das was du als vorlagen ansiehst ist eine perfekte dokumentation!

    Soweit ich das gesehen hab hat das Ding vorlagen. Ich versteh aber den Sinn von Bootstrap noch immer nicht ganz. Klar ich bin grad schon fleißig dabei CSS zu lernen, aber das einzige was ich von Bootstrap verstanden habe ist, dass es die Seiten automatisch auf das jeweilige Device bzw die Größe des Displays anpasst aber sonst weiß ich nicht was es macht.

    bootstrap ist ein framework
    boostrap besteht im wesentlichen (!) aus einer einzigen großen css daten
    diese verlinkst du mit deiner html datei und dann kannst du in der html datei klassen (class="container") benutzen um vorgefertigte styles zu verwenden

    ja genau - les mal den wikipedia eintrag ist eig. ziemlich gut!
    ne es macht keine seite responsive, es gibt klassen die ein element responsive macht (% angaben)

    respnsive bekommst du die seite mit dem sog. grid system (siehe. link im post #2)

    ne du kannst ja dann noch deine eigene css datei einbinden und die styles somit überschreiben - im notfall gibts auch !important

    Je nach dem welche Größen du in den Mediaquries angibst werden halt nur der bestimmte bereich der CSS zum darstellen verwendet(der Globale bereich auch), obwohl sie ganz geladen wird.

    Probier mal folgendes, vieleicht hilft es dir das zu verstehen:

    HTML-Quellcode

    1. body{
    2. background: yellow;
    3. }
    4. @media only screen and (min-width : 320px) and (max-width : 480px){
    5. body{
    6. background: black;
    7. }
    8. }


    bei einer Auflösung von z.B. 320 x 480 hast du dann einen schwarzen hintergrund, alles was nicht in dieser Range ist, hat dann einen gelben Hintergrund.

    wenn ich dann aber die seite auf jedes Device anpassen muss dann braucht das doch ewig..
    Man kann ja z.b mindest width auf 400px und max auf 600px setzen aber díe seite sieht ja bei Leuten mit 400 dann trotzdem anders aus als mit 550..
    Das versteh ich nicht so ganz. Und was genau bringt mir dann die Prozentangabe? Wann soll man diese einsetzen?

    Die % angaben kannst du nutzen um die width, height oder Position einzelner Elemente zu setzen, geht aber Richtung Liquid Design. Wenn du z.B. eine ul als Inline-Block hast, welche 5 li´s hat, gibst du der ul width: 100%, damit man bei hinzufügen neuer li´s nicht immer die % selbst rechnen muss, kansst du CSS auch rechnen lassen, muss man nur die Anzahl ausbessern.

    PHP-Quellcode

    1. width = calc(100% /5)

    Ich hab heute ein neues Projekt angefangen, bisher hab ich nur eine Navigationsleiste fertig, schick ich dir via PN.

Facebook
Telefonspende