Ankündigung

Einklappen
Keine Ankündigung bisher.

Responsive design with max-width:480px and %

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Responsive design with max-width:480px and %

    Hi leute,

    kurze Frage zum Verständnis für responsive design.

    Grundsätzlich spreche ich mit
    PHP-Code:
    max-width:480px
    alle mobilen Engeräte an, nun kann es aber sein, dass ein mobiles Endgerät z.B: ein width: von 340px und ein anderes ein width: von 400px hat.

    Dann wäre das Resultat dass man auf seinem Handy die Webseite von links nach rechts scrollen kann.

    Also wäre es doch das sinnvollste wenn ich bei einem media query von
    "max-width:480px;" mit Prozentangaben arbeite, damit ich auf jedem mobilen Endgerät die gleiche Darstellung habe oder??

    Grüße!


  • #2
    Prozent sagt dir kaum was, bei diesem Fall.
    Ich hab bei mir, die Seite bzw. CSS so aufgebaut, dass mobile bei mir Standard ist.
    d.h. dass erst ab 480px was geändert wird.
    also:
    Code:
     css für unter 480 px...
    und dann:
    @media only screen and (min-width: 480px) {...
    @media only screen and (min-width: 768px) {...
    @media only screen and (min-width: 1140px) {...
    UPDATE: ich habe dich falsch verstanden, was Prozent angeht..
    Jein. Ich habe nur eine Prozentangabe: maindiv width: 95%; das wars
    mfg Alexander
    PHP-Code:
    if($happy)
       
    $happy false

    Kommentar


    • #3
      Ich weiss es wird auf "mobile first" geschwört. Doch ich gehe genau den anderen Weg weil wenn man "mobile first" macht werden bei Browsern welche Media Queries nicht verstehen natürlich die Inhalte für kleinere Bildschirme angezeigt. Klar es gibt glaube ich Polyfills für diese, aber so viel ich weiss klappt das dann nur mit Javascript.

      Kommentar


      • #4
        Es sind genug Browser die es unterstützen: Click
        Bei allen anderen -> Update your browser, dude!
        mfg Alexander
        PHP-Code:
        if($happy)
           
        $happy false

        Kommentar


        • #5
          Bei allen anderen -> Update your browser, dude!
          Das ist mir schon klar, aber sag es mal denn Besuchern. Es gibt noch viele welche ältere Broswer benutzen vorallem Firmen.

          Kommentar


          • #6
            ok, aber das löst doch nicht das Problem, dass man auf dem handy auf der website von links nach rechts scrollen kann.

            Wenn man z.B. mit max-width:480px; arbeitet aber das iphone hat ein width von 320px, dann ist genau dies der Fall, man scrollt von links nach rechts.

            Daher die Frage, mit Prozenten arbeiten oder gibt es da eine andere Vorgehensweise?

            edit: im header habe ich:
            PHP-Code:
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
            Könnte mir da jmd zu was raten? LG

            Kommentar


            • #7
              Eigentlich habe ich schon gesagt: noch ein media query einbauen, extra für 320px.
              Oder dein mobile css ist für alle angelegt, z.b. Größen mit Prozenten, Fonts mit em usw.
              mfg Alexander
              PHP-Code:
              if($happy)
                 
              $happy false

              Kommentar


              • #8
                Die Media queries dienen ja nur als anhaltspunkt. Schlussendlich ist es egal welche Pixelangabe Du hast. Musst eben schauen wann eine Media Query nötig oder sinnvoll ist.

                Z.B.
                Code:
                .column{ width: 33%;}
                
                @media screen and (max-width: 900px){
                	.column{ width: 49%;}
                }	
                
                @media screen and (max-width: 600px){
                	.column{ width: 100%;}
                }
                Drei spalten, dann 2 Spalten und dann nur noch eine.

                Kommentar


                • #9
                  Hallöchen,

                  offensichtlich hast du noch nicht so ganz verstanden, wozu Media-Queries eigt. gedacht sind. Sie bieten dir u.a. die Möglichkeit auf unterschiedliche Viewport-Größen zu reagieren. Es lassen sich also CSS-Regeln definieren, welche bis zu oder ab einer festgelegten Viewport-Breite angewandt werden sollen. Es macht dabei wenig Sinn, sich an den Auflösungen der Geräte zu orientieren - dafür gibt es einfach zu viele. Vielmehr solltest du die Media-Queries so definieren, dass deine Anwendung in jedem Fall brauchbar dargestellt wird.

                  Viele Grüße,
                  lotti

                  Kommentar


                  • #10
                    2 strub & syuam:
                    es empfielt sich in diesem Fall mit min-width anstatt max-width zu arbeiten.
                    Z.b. min-width: 360 px kann man auch für Smartphones mit der größe 480 px verwenden... und erst ab 768px/800px (Tabletts) was anderes...
                    wobei es ist Gestaltungssache.
                    mfg Alexander
                    PHP-Code:
                    if($happy)
                       
                    $happy false

                    Kommentar

                    Lädt...
                    X