Gunther: [SASS] mixin @media rule Verknüpfung der Expressions?

Beitrag lesen

Hallo Mathias!

Sorry, den Post habe ich eben gar nicht gesehen (der Thread wird langsam unübersichtlich). ;-)

Prämisse: Browser runden em-Werte in MQs kaufmännisch auf volle px, bevor sie angewendet werden.

So meine Erfahrungen (bisher) ...!

Angenommen ich lasse die MQ bei x + 1/16em anfangen:

@media screen and … and (max-width: 50em)
@media screen and (min-width: 50.0625em) and …

Bei den genannten 19px wären 1/16em berechnete 1.1875px. Abgerundet 1px. Also würden die MQs funktionieren, es gäbe keinen »Zwischenraum«, in dem keine der beiden MQs greift.

Wenn ich hingegen eine Basis-Schriftgröße von 8px annehme:

1/16em * 8px = 0.5px

Wird aufgerundet auf 1px. *Darunter* (7px) würde es kritisch werden, dann würde abgerundet.

Anders herum: Wenn ich hingegen eine Basis-Schriftgröße von 24px hätte:

1/16em * 24px = 1.5px

Wird aufgerundet auf 2px. Damit gäbe es eine Viewport-Breite, in dem keine der beiden MQs greift.

Sprich, wenn ich von 16px ausgehe, habe ich eine Toleranz von 8px - 23px. (Man korrigiere mich.)

Sehe ich genauso!

Und wenn wir mal davon ausgehen, dass wenn überhaupt ein User die Schriftgröße ändert, er das tut, um alles "besser erkennen" zu können, sprich er eine größere Schriftgröße als die 16px einstellt, dann könnte man statt 1/16 auch ein 1/20 (0.05em) nehmen.

Dadurch verkleinert man zwar den Spielraum nach unten (auf >= 11px), gewinnt aber nach oben hin etwas dazu (auf <= 29px).

Das ist, behaupte ich einmal, in der Praxis genug, um Fehler zu vermeiden. Es kommt noch hinzu, dass der Viewport genau diese Pixelbreite haben muss, um den Fehler auszulösen. Das ist alles möglich, aber äußerst unwahrscheinlich. Die Wahrscheinlichkeit, dass ich nach dem Schreiben dieses Postings aus heiterem Himmel tot umfalle, ist vermutlich höher. ;)

Das wollen wir aber nicht hoffen, auch wenn du vermutlich Recht haben dürftest ...! ;-)

BTW: Ich empfehle jedem mal testweise seine Basis-Schriftgröße auf 28px einzustellen und dann durchs Web zu surfen ...!
Da sieht man dann u.a. mal, wie viele Sites einem die Schriftgröße "vorschreiben".

Gruß Gunther

0 84

[SASS] mixin @media rule Verknüpfung der Expressions?

Gunther
  • css
  1. 1
    Gunnar Bittersmann
    1. 0
      Gunther
      1. 0
        Gunnar Bittersmann
        1. 0
          Gunther
          1. 0

            Korrektur: Geht doch ohne 'unquote()'

            Gunther
          2. 0
            Gunnar Bittersmann
            1. 0
              Gunther
              1. 1
                Gunnar Bittersmann
                1. 0
                  Gunther
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Gunnar Bittersmann
                    2. 0
                      Gunther
                  2. 0
                    molily
                    1. 0
                      Gunnar Bittersmann
                    2. 0
                      Gunther
                      1. 0
                        molily
                        1. 0
                          Gunther
                          1. 0
                            molily
                            1. 0
                              Gunther
                              1. 0
                                molily
                                1. 0
                                  Gunther
                            2. 0

                              Mobile First

                              molily
                              • design/layout
            2. 0
              Gunnar Bittersmann
            3. 0
              Gunnar Bittersmann
              1. 0
                Gunther
                1. 0
                  Gunnar Bittersmann
              2. 0
                molily
                1. 0
                  Gunther
                  1. 0
                    Gunnar Bittersmann
                  2. 0
                    Gunnar Bittersmann
                  3. 0

                    gelesene Postings hervorheben

                    Gunnar Bittersmann
                    • zu diesem forum
                    1. 0
                      Gunther
                2. 0

                  "Lücke" in stacked MQs detektieren

                  Gunther
                  • javascript
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Gunther
                  2. 0
                    molily
            4. 0

              Wert der Basis-Schriftgröße

              Gunther
              1. 0
                Gunnar Bittersmann
                1. 0
                  Gunther
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      Gunther
                      1. 0
                        Gunnar Bittersmann
                        1. 0
                          Gunther
                          1. 0
                            Gunther
                            1. 0
                              Gunnar Bittersmann
                              1. 0
                                Gunther
                                1. 0
                                  Gunnar Bittersmann
                                  1. 0
                                    Gunther
                                    1. 0
                                      Gunnar Bittersmann
                                      1. 0
                                        Gunther
                                        1. 0
                                          Gunnar Bittersmann
                                          1. 0
                                            Gunther
                                            1. 0
                                              Gunnar Bittersmann
                                              1. 0
                                                Gunnar Bittersmann
                                                1. 0
                                                  Gunther
                          2. 0
                            Gunnar Bittersmann
                            1. 0
                              Gunther
                              1. 0
                                Gunnar Bittersmann
                        2. 0
                          Gunnar Bittersmann
                        3. 0
                          Gunnar Bittersmann
                          1. 0
                            Gunnar Bittersmann
        2. 0
          Gunnar Bittersmann
          1. 0
            Gunther
            1. 0
              Gunnar Bittersmann
              1. 0
                Gunther
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Gunther
        3. 0
          molily
          1. 0
            Gunther
            1. 0
              molily
              1. 0
                Gunther
            2. 1
              Gunnar Bittersmann
              1. 0
                Gunther
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    Gunther
                  2. 0
                    molily
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Gunther
      2. 0
        molily
        1. 0
          Gunther
          1. 0
            molily
    2. 0
      Gunnar Bittersmann
      1. 0
        Gunther