Responsive Webdesign (Grundsätze / Media Queries)

  • Zur Optimierung von Webseiten (z.B. für die mobile Nutzung,)gehört auch die Optimierung für verschiedene Bildschirme, das Responsive Design.


    Hierbei geht es darum den Inhalt für den Benutzer möglichst einfach überblickbar und gut lesbar darzustellen.


    Hier ein Beispiel


    Für Browserfenster 0-900px:
    [Blockierte Grafik: http://wolf.wolfgang-m.de/beispiele/res1.png]


    für Browserfenster, breiter als 900px:
    [Blockierte Grafik: http://wolf.wolfgang-m.de/beispiele/res2.png]


    für Browserfenster, breiter als 1500px:
    [Blockierte Grafik: http://wolf.wolfgang-m.de/beispiele/res3.png]


    Warum überhaupt?!

    • Standert Webseiten sind meistens nur für eine Bildschirm Größe geschrieben
    • Oft muss man dann auf kleineren Geräten horizontal scrollen (sehr nervig)
    • Auf Größeren Geräten sehen Normale Seiten doch meistens sehr bescheiden aus
    • Auf kleineren Gerätemn muss man erstmal zoomen um den Text ansatzweise Lesen zu können
    • ...


    Was wir brauchen:

    • CSS Kenntnisse
    • Ein bisschen Zeit
    • ...


    Was wir tun:

    • Wir legen für verschiedene Bildschirm/Browserfenster Größen, verschiedene Syles an.


    Wie wir das machen:

    • Durch sog. Media Queries und über die Bildschirm Größe, da z.B. Apple nicht das handheld Prefix akzeptiert.


    Media Queries wissen verschiedene Dinge über Den Benutzer:(genaueres später)

    • Breite und Höhe des Browserfensters
    • Breite und Höhe des Gerätes
    • Orientierung (Quer- oder Hochformat)
    • Bildschirmauflösung
    • ...


    Tips:

    • Im Stylesheet, zuerst Grund Anweisungen z.B. html, body{} , dann das "kleinste" Design und am Ende das "größte" Design im Stylesheet, da z.B. auch noch heute die mobile Internet-Verbindung meistens langsam ist und dann nicht erst der ganze unwichtige Style geladen wird.
    • Wenig Code gewurschtel produzieren ;)
    • Für Mobile stylesheets:
    • Text Größe +30% ungefähr. (der lesbarkeit wegen)
    • Buttons mindestens 30x30px eher mehr! (es gibt auch Personen mit größeren Daumen und Fingern, denen wir es nicht schwer machen wollen)


    Nun zum eigentlichen:


    Speziefische stylesheets kennt man eventuell von

    CSS
    1. @media print {
    2. /* Styles für Drucker */
    3. }


    Bezogen auf Mobile-Web könnte man auch so arbeiten:

    CSS
    1. @media handheld{
    2. /* Styles für Mobile Geräte (Außer Apple + Safari) */
    3. }

    Funktioniern,
    doch da zieht uns Apple einen Strich duch die Rechnung.


    Also steuern wir unseren neuen Style mit Media Querries, da wir ja auch z.B. style für extrem große Geräte bereit stellen wollen können:

    CSS
    1. @media screen and (min-width: 1024p){
    2. /* Styles für alle Browserfenster die breiter als 1024px sind */
    3. }

    an.


    CSS
    1. article{
    2. width: 100%;
    3. }
    4. @media screen and (min-width: 1024px){
    5. article{
    6. width: 50%;
    7. }
    8. }

    Jetzt wird auf allen Browser Fenster, die breiter als 1024px sind das 2. Article atribut (width: 50%) gelten.


    Dies kann man z.B. auch so erreichen:

    HTML
    1. <head>
    2. <link rel="stylesheet" type="text/css" media="all and (min-width: 1024px)" href="css/desktop.css" />
    3. </head>

    Hier werden die Media Queries nur vom Html verarbeitet.


    Im Bereich des Mobile Web;
    wird so mancher daran verzweifeln, wenn er versucht seinen Inhalt 1024px breit zu machen und das Ganze dann in auf dem iPad in Safari ausprobiert.
    Apple und damit Safari will „Das reale Internet“ darstellen und zoomt deswegen alle Webseiten einfach mal viel kleiner, so das der Inhalt keine 1024px breit ist sondern nur z.B. 700 px.


    Hierfür kommt in die betreffenden Seite dieses Stück Code:

    HTML
    1. <head>
    2. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    3. </head>

    Sorgt dafür das der Inhalt in „orginal“ Größe angezeigt wird.


    Okay, stell dir vor, das wars eigentlich auchschon! :)
    Hier mal ein mini Beispiel-Code:


    Hier einmal ein paar Media Querries:


    Ein paar wichtige Parameter: (für alle kann man mit min- /max- arbeiten, außer bei orientation! )

    • width || Fenster-Breite
    • device-width || Display-Breite
    • height || Fenster Höhe
    • device-height || Display-Höhe
    • aspect-ratio (z.B. 16/9) ||Fenster-Seitenverhältnis
    • device-aspect-ratio (z.B. 16/9) || Display-Seitenverhältnis
    • color (z.B. 0 für farblose Geräte) || Fenster-Farb-Bits
    • resolution (z.B. 300dpi) || Fenster-Auflösung
    • orientation (z.B. landscape oder portrait) || Quer/Hochformat


    Anbei noch ein paar Parameter für Medien spezifische Stylesheets:

    CSS
    1. @media print{
    2. body{
    3. color: black;
    4. }
    5. }


    @media

    • all || Stylesheet gilt für alle Ausgabegeräte
    • screen || Bildschirme
    • print || Drucker
    • handheld || Handhelds (Palmtops, PDAs, WinCE-Geräte)
    • projection || Video-Beamer, Overhead-Projektoren
    • tv || Tv's
    • tty || Ausgabegeräte mit feststehenden Zeichentypen (z. B. Terminals, ältere Mobiltelefone)
    • speech (CSS2: aural) || aurale Ausgabegeräte (z. B. Screenreader)
    • braille || Blindenschriftfähige Ausgabegeräte
    • embossed || Blindenschriftfähige Drucker


    Hoffe es hilft mal jemandem.
    Wenn ihr fragen habt, ich etwas vergessen habe, ihr Fehler entdeckt, sonnstwas ist, Kommentiert :thumbsup:

    Dieser Beitrag wurde bereits 13 Mal editiert, zuletzt von wolf ()

  • @TS ich wollte das schon länger mal machen, du hast mir dann den Ruck gegeben :D
    lauras könnte man eventuell solche Beiträge wie z.B. The Scout's Best Prac. PHP und diesen als wichtig markieren? :)


    Habe mal oben ein bisschen erweitert.

  • Ich halte das Thema für zu umfangreich um ein gescheites Foren-Tutorial dazu erstellen zu können.
    Es wäre wichtig klarzustellen dass die gesamte Thematik nicht innerhalb von 6 Monaten zu erlernen ist.
    Media Queries machen bekannterweise nur einen Bruchteil von dem aus was RWD/AWD überhaupt ausmacht, zudem fehlt im Tutorial noch die Antwort auf die Frage - warum?
    Genauso fehlen Hintergrundinformationen bei den Tipps.


    Ich halte es für "gefährlich" in einem Forum wo Anfänger zu erwarten sind einen Haufen Code in einen Thread zu werfen.
    Was man braucht sind ...
    - fortgeschrittene Kenntnisse in Web-Standards
    - fachkundigen Sinn für Kontrast, Formgebung und Typografie
    - ausgedenhtes Verständnis für die Bedeutung von Web-Content und der technischen Optimierung


    Wiederholt, sind Media Queries ohne Fallbacklösungen eher zu meiden, da RWD auch nicht ausschließlich für "Mobile-Web" steht.
    Ich würde daher das Thema nicht auf Responsive Webdesign in (fälschlicherweise) Verbindung mit Mobillösungen beziehen,
    sondern eher etwas wie "Media Queries erklärt" und wofür man sie nutzen könnte.



    Achja und im Beispiel hast du das html-tag übersprungen :)

  • - Dieser Thread ist auch ein Tutorial wonach man erstmal suchen muss, wenn man sich dafür interessiert, und wenn das denn so ist, setzt man sich auch damit auseinander und kann dann auch damit leben mal sich durcharbeiten zu müssen.
    - Wie willst du denn RWD ohne mediaquerries lösen (ohne z.B. sub Domains o.ä.)?
    - Ich habe mal bisschen Allg. formuliert um dieses fälschliche RWD = Mobile Design zu unterbinden.
    - Der Code war einfach unvollständiger Ausschnitt und ich habe ihn vervollständigt.
    - Was hättest du gerne für Tipps?
    - Sich mit Mobil-Optimierung und mit dem tieferen RWD auseinanderzusetzen, braucht man natürlich eine ganze Weile.


    - fortgeschrittene Kenntnisse in Web-Standards
    - fachkundigen Sinn für Kontrast, Formgebung und Typografie
    - ausgedenhtes Verständnis für die Bedeutung von Web-Content und der technischen Optimierung

    Braucht man das?
    -Nein, für Perfektion evtl aber um sich mal damit auseinanderzusetzen wie man Seiten verschieden Stylt sicher nicht.
    Ehrlich gesagt habe ich Weder Web-Standart Kenntnisse, noch Fachkundigen Sinn für Kontrast, Formgebung und Typografie.


    WIr wollen hier ja die Website Technisch nicht optimieren sondern nur optimiert Designen ;)


    Wenn du lust hast kannst du ja z.B. ein Tutorial Teil-2 Responsive Webdesign (Tabellen) schreiben :)

    Dieser Beitrag wurde bereits 5 Mal editiert, zuletzt von wolf ()

  • ich persönlich vertrete hier lediglich die professionelle Schiene.


    dann solltest du dir eventuell überlegen ob du hier richtig bist, tendenziell eher nicht. Es geht in diesem Forum darum, Anfängern das Thema Webdesign und alles was damit zu tun hat näher zu bringen und ihnen einen Einstieg zu bieten.
    Für einen Anfänger, der sich schon ein bisschen mit HTML und CSS auskennt und nun seine Website für Mobilgeräte optimieren möchte, ist das was wolf gepostet hat genau das Richtige.


    Und was bitte ist "Man darf es dann einfach nicht responsive webdesign nennen" für eine Aussage? Wer entscheidet das? Du? Eher nicht. Wir haben hier einen Thread der sich damit beschäftigt, Websites an verschiedene Endgeräte anzupassen, das ist responsives Webdesign, zumindest mal für einen Anfänger. Ob nun der allwissende Profi, der du ja scheinbar bist, der Meinung ist, dass man das nicht so nennen darf, ist im Kontext dieses Forums vollkommen irrelevant.

  • Wird das wieder ein "Wer ist der Coolste?"-Thread? Sehr geehrter Prof. Dr. Az., wir sind ein Hilfeforum dessen hauptsächliches Publikum ihre Basis auf dem dazugehörigen Seminar aufgebaut hat. Das ein Tutorial nicht so umfangreich ist wie ein Studium sollte wohl jedem klar sein. Es geht hier lediglich darum einen Ansatz zu bieten, wer die gesamte Thematik erlernen möchte ist hier schlichtweg nicht mehr an der richtigen Stelle. Ich möchte dich hier herzlichst bitten dich dem (dir scheinbar nicht ausreichenden) Nivaeu hier im Forum anzupassen und deine professionelle Schiene für andere Foren aufzusparen, diese Aussage finde ich persönlich übrigens ziemlich peinlich. Ein kluger Mann hat mal gesagt: "Der einzige Unterschied zwischen professionell und nicht professionell liegt daran ob man seinen Lebensunterhalt damit verdient."
    Du kritisierst in einem Satz das Hintergrundinformationen fehlen und nutzt einen Satz vorher "RWD/RAW", das widerspricht sich leider etwas, außerdem habe ich den Eindruck das du relativ energisch nach Fehlern suchst und dabei welche findest die im Kontext absolut keine sind.


    Ich frage mich gerade wirklich was daran verkehrt ist Responsive Webdesign mit mobilen Geräten in Verbindung zu bringen? Responsive bedeutet in diesem Kontext reagierend, der CSS Quellcode reagiert auf das Endgerät, hierzu zählen Monitore/Fernseher und eben Mobilgeräte (Tabletts, Telefone, ..), mit meinem Toaster empfange ich keine Internetseite. Es gibt auch noch andere Geräte die auf das Internet zugreifen, diese jedoch empfangen kein CSS. Responsive Webdesign fälschlicherweise auf Mobilgeräte beziehen? Also bitte..


    Wir fühlen uns nur vor den Kopf gestoßen wenn falsche Tatsachen auf dem Tisch liegen.


    Ich bitte außerdem darum diese Diskussion jetzt zu unterbrechen und beim Thema zu bleiben, sonst müssen wir uns wohl überlegen ob man die Tutorials eventuell nach Erstellung schließt.

  • Und jetzt alle ihre Schwänze wieder einpacken, lauras als Admin hat sowieso den Längsten, da kommt keiner drumrum :P
    Ja, es wurden tatsachen genannt, ja, es fehlen Teile, aber JA, verdammt, das ist ein Anfängerforum!


    Himmiherrgott, und jetzt hör ich auch auf, den Thread unnötig aufzupumpen, danke wolf, für deine Arbeit!

  • Von der Übersicht wäre es eh praktischer solche Fragen in separaten Themen zu behandeln. Wenn direkt unter dem Tutorial noch etliche Beiträge angeheftet sind (so wie hier) wird es unübersichtlich für den Lernenden.


    Würden wir an dieser Stelle gerade über ein Problem mit dem Abstand von Element XY besprechen müsste ein späterer Gast erst das ganze Thema durchgucken bevor er überhaupt weiß ob seine Frage bereits beantwortet ist, findet er in der Themenauflistung direkt was er sucht spart er sich Zeit und wir uns doppelte Themen.

  • Als neuling kann ich ja mal meinen senf dazu geben^^


    Bin noch recht am anfang und ich muss sagen, dass mich dieses kleine tutorial wieder sehr motiviert hat. es wäre schön erfolge auch auf dem smartphone zu sehen. als ich vor einigen monaten mein projekt schon ein gutes stück weiter hatte, habe ich meine seite auch auf dem handy aufgerufen und naja es war halt in der desktop ansicht und dadurch total unbrauchbar. jetzt versuche ich die seite direkt richtig aufzubauen. und jeder kleinste codeschnipsel aus der praxis hilft mir neuling auch weiter. also daumen hoch und weiter so :) komme sicherlich nochmal bald auf euch zurück^^ ihr scheint ja ein netter haufen zu sein :)

  • so, eure nervensäge ist wieder mit einer frage da :-P (habe ihr keine trinkgeldkasse?)


    ich habe jetzt mal grundgerüst für responsive webdesign gemacht und hoffe, es stimmt so? also bevor ich weiter bastel, wollte ich fragen ob ich das so richtig und "sauber" mache?





    Zum zentrieren der Webseite: Manche machen left -50% und rechts -"halbe seitenbreite"... Dabei funktioniert "auto" ja auch und geht für alle Größen? Muss ich da was wissen, oder ist auto gut und das andere doof?

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Rantanplan ()

  • Hallo,


    es wäre besser du wärst bei deinem Thema geblieben oder hättest ein neues eröffnet, da die Überschrift deins Alten zu deinen aktuellen Fragen nicht passt.


    Zitat

    ich habe jetzt mal grundgerüst für responsive webdesign gemacht und hoffe, es stimmt so?


    Das kann dir niemand beantworten. Denn, da du es noch immer nicht verstanden hast:


    Der Inhalt bestimmt das Layout und damit auch das responsive Design.


    Also: Erst Inhalt, dann Layout und Design. Der Inhalt fehlt bei dir noch komplett. Deshalb


    Zitat

    also bevor ich weiter bastel, wollte ich fragen ob ich das so richtig und "sauber" mache?


    kann man dich nur auf einige strukturelle Mängel hinweisen. Nein, das ist nicht sauber.


    HTML
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">


    XHTML ist bereits vor 8 Jahren für tot erklärt worden und wird seitdem offiziell nicht mehr weiter entwickelt. Aktuell sinnvoll ist nur HTML5, also


    HTML
    1. <!DOCTYPE html>
    2. <html lang="de">
    3. <head>
    4. <meta charset="utf-8">
    5. ...


    HTML
    1. <div id="wrapper">


    Ein Wrapper ist überflüssig wie ein Tropf. Weg damit.


    HTML
    1. <div ...


    Du leidest unter Divits, auch Diveritis genannt. Besser mit HTML5 die dafür vorgesehenen Container wie header, nav, main, footer u.s.w. verwenden. Und div nur, wenn es nichts besseres gibt.


    CSS
    1. @media screen and (max-width: 350px){
    2. ...
    3. @media screen and (min-width: 350px){
    4. ...


    Ganz schlecht.


    Zunächst werden die CSS-Anweisungen erstellt, die für alle Fenstergrößen gelten sollen.


    Dann sollte man sich entscheiden, ob man nach Mobile-First oder Desktop-First vergehen will. Technisch sind beide Vorgehensweisen vollkommen gleichwertig. Anfängern wird gerne zu Mobile-First geraten, da auf Smartphones häufig nicht der gesamte Inhalt der Seite angezeigt werden soll.


    Die min-width bzw. max-width-Angaben richten sich dann nach dem Inhalt der Seite - der bei dir noch komplett fehlt. Für 350px eine Media Query zu erstellen ist heutzutage meist nicht notwendig.


    CSS
    1. #wrapper {
    2. max-width: 950px;
    3. }


    Warum soll der Inhalt höchstens 950px breit werden? Solche Einschränkungen stammen aus dem letzten Jahrtausend und das Responsive Design soll auch dazu dienen, Desktop-Fenster mit Inhalt zu füllen und den Usern grade kein halbleeres Fenster vorzusetzen. Den insgesamt überflüssigen Wrapper habe ich bereits erwähnt.


    CSS
    1. max-height: 258px;


    height-Angaben sollten so weit wie möglich unterbleiben. Die Höhe richtet sich nach dem Inhalt und die können die Browser selbst bestimmen.


    Zitat

    Dabei funktioniert "auto" ja auch und geht für alle Größen?


    auto ist in der Regel sinnvoller, funktioniert aber nicht in allen Situationen. Es gibt also kein entweder .. oder.


    Gruss


    MrMurphy

  • Die high-angabe ist zum debuggen bzw das man auch was sieht vom container bzw in dem fall wrapper, stelle ich dann auf auto um.


    klar ist noch kein inhalt drinnen, geht ja um den grundgedanke zum aufbau, werde natürlich ein grunddesign für ein gerät erstellen und dann an andere geräte anpassen. geht ja jetzt ums grundsystem.


    was ist an dem div aufbau schlecht? habe viele aktuelle videos gesehen die einen solchen aufbau machen? (will ja auch wissen wieso). also das grundgerüst dann mit html5 ... wie soll ich das suchen? html5 grundgerüst? oder hat es auch einen fachbegriff?

  • Hallo


    Zitat

    klar ist noch kein inhalt drinnen


    Nee, ist überhaupt nicht klar. Und vernünftiges Layout kannst du so auch nicht lernen.


    Zitat

    was ist an dem div aufbau schlecht?


    Erst mal fehlt die Semantik.


    Und dann wird durch die vielen schließenden div der Quelltext auch für den Webseitenersteller selbst ganz schnell unübersichtlich.


    Zitat

    habe viele aktuelle videos gesehen die einen solchen aufbau machen?


    Die sind entweder nicht aktuell (das Internet vergisst nie) oder die Ersteller haben von aktuellem HTML / CSS keine Ahnung. Davon gibt es leider sehr viele. Nur weil jemand ein Video bei YouTube veröffentlichen kann ist er noch lange kein Spezialist für Webseiten.


    Zitat

    html5 grundgerüst? oder hat es auch einen fachbegriff?


    Es gibt kein immer passendes Grundgerüst. Das Grundgerüst hängt vom Inhalt ab. Und der ...


    Gruss


    MrMurphy

  • Kann man eigentlich eine Statische Seite in einen responsive Rahmen setzen? Also zur Erklärung wieso ich das wissen will, ich mache gerade eine Responsive Seite als Training, aber im Hinterkopf ist immer noch die Frage, wie das mit dem Adeptive-Design geht - leider gibts in google nur noch Responsive Tutorials zu finden, zumindest die ersten XXX Seiten. :-/


    Also würde das nur gern verstehen und abhaken....

    im adeptive muss das doch eigentlich so laufen dass ich
    eine statische seite habe die sich immer 100% an das fenster des
    browser bzw gerät anpasst (bzw die SICHT 100% ist)... ohne die meta viewport angabe, zoomt das
    iphone ja auch 100% seite aufs display und die muss nicht responsive
    sein.... wenn ich jetzt eine statische seite habe, aber z.b. ab einer
    smartphone auflösung das header-banner austauschen will... muss ich im
    ersnt ALLES responsive machen? weil, wenn ich mediaquery setze und sage,
    alles unter 400px (mobil) soll eben banner B statt A haben... wird mir die
    980px seite auf die 400px angeschnitten und die seiten sind weg! da müsste man doch sagen können - zoom wie du es auch ohne meta-viewpoint kannst, auf 100% seitenansicht....



    Mit:

    Code
    1. <meta name="viewport" content="width=device=width, initial-scale=1, user-scalable=yes"/>


    Setze ich das Blickfeld ja auf einen bestimmten Wert z.B. mit MediaQuery

    Code
    1. @media screen and (max-width: 500px){


    so... im Adeptive sind ja statische Seiten, die je nach Bildschirmgröße bzw Gerät umspringen. (Ja, nicht Zeitgemäß, aber die Frage ist trotzdem offen und auch alte "Geschichte" will man manchmal verstehen).
    Das heißt, wenn ich die MediaQuerys wie im responsive Design benutze, wird meine statische Seite nicht 100% angezeigt, da ich kmeine Prozentwerte habe, die sich an das Fenster anpassen.


    Ergo, wenn ich z.B. 5 statische Seiten habe und Breakpoints setze, werden diese im fallenden width abgeschnitten angezeigt.... Hat man mit der alten Adeptive-Art anders gearbeitet als mit den MediaQuerys? Wenn ich eine Ausgangsseite habe und dann Stylesheelts benutze für eben anpassungen an Geräte, gibt es Anzeigefeher bzw abgeschnittene Webseiten.



    Fragen:


    1. Meta: (width=device=width) brauche ich ja, um mobile Geräte zu identifizieren. Wenn ich in den MediaQuerys eine Breite eingebe, wird eine Statische Seite die z.B. 980px hat, nur in dem Bereich angezeigt, wie die @media angibt. Also eine 950px statische Seite, wird dann mit dem ( @media screen and (max-width: 500px){ )um 450px abgeschnitten, denn nur 500 von den 980px werden angezeigt.... gibt es keine andere lösung zur erkennung der mobilen auflösung bzw screenbreite, so dass er das gerät erkennt, aber den blick immer auf den original 100% (980px) hat?
    2. muss ich im adeptive für 5 breakpoints 5 index seiten bauen, dass eben die @media angaben zur breite auch 100% angezeigt werden? ch dachte im adeptive kann man auch einfach mit einer seite arbeiten, die zwar statisch ist, aber je nach gerät eben objekte und elementa verschiebt bzw ausblendet........


    versteht ihr die frage? ich kanns nicht einfacher fragen, sorry... im prinzip müsste man doch sagen können "zoom die seite auf 100% (950px desktop auflösung)... initial-scale=1.0 hat doch damit was zu tun oder? also die scale dann so anpassen, das es wieder stimmt...


    zusammenfassung:


    adeptiv ist ja statisch mit mehreren breakpoints... statisch gebe ich doch feste werte ein, z.b. webseiten breite 980px (beispiel) und mit der einen seite arbeite ich. lege dann für jeden breakpoint styles an um elemente eben zu verschieben ect. problem - im browser geht es.... wenn ich aber die meta angabe mache um mobile zu desktop zu unterscheiden, schneidet er die statische seite die 980px ist immer auf die @media width aus und man hat abgeschittene seiten die ncht angezeigt werden...


    deswegen die frage, ob man eine statische seite in einen responsive rahmen machen kann. das alle inhalte der seite bzw containers durch den rahmen automatisch verkleinert bzw angepasst werden und man nicht jedes element responsive macht... habs mal mit einem div probiert und auf max wi gemacht, geht natürlich nicht :D


    hier ein beispiel foto: adeptiv z.b. eine statische seite, (jaja, ist es nicht :-P) oben dekstop aufösung unten dann mobile 400.... wenn ich im stylesheet sage, unter width 400 sollst du dies oder das machen... macht er es auch. ABER die seite wird dann abgeschnitten und nur 400 breit angezeigt statt 100%.. dabei muss ich für breakpoints im adeptive bzw für mobile geräte doch nicht mit prozent arbeite? adeptive kann doch auch mobil und desktop unterscheiden, nein? sonst wärs ja sinnlos nur auf dem desktop browser. irgendwas muss man doch für die 100% ansicht machen im adeptiv, oder eben andere mediasquerys benutzen bzw den meta viewport ändern... :-/ hm.


    [Blockierte Grafik: http://250kb.de/u/150911/j/d4MluJFc7dH7.jpg


    Dieser Beitrag wurde bereits 6 Mal editiert, zuletzt von Rantanplan ()