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

Beitrag lesen

@@Gunther:

nuqneH

Das hat fast auf Anhieb hingehauen ...,
einzig die quoted strings ("only screen" und " and ") musste ich jeweils noch in ein 'unquoted()' einschließen.

Hm, bei mir (Sass 3.3.7 auf Mac; sehe gerade, ich könnte mal updaten) läuft der Code wie gezeigt – auch ohne 'unquoted()'.

Bei mir (Windows + SASS 3.3.10) nicht.

Außerdem gehöre ich zu den Anhängern von 'stacked' MQs, d.h. ich verwende 'min-width' Werte für meine Breakpoints, und lasse die benötigten 'max-width' Werte in einer Funktion berechnen (natürlich alles in 'em's).

Wie machst du das? Mit not? Oder wie umgehst du diese Problematik?

Ja, das ist halt der Haken an der Geschichte (overlapping mq haben aber imho ggf. mehr - kommt halt immer auf das jeweilige Projekt an).

Das "funktioniert" halt nur so lange zuverlässig, wie die Annahme "Basis-Schriftgröße = 16px" zutrifft.

Aber mal ehrlich: Ich habe mich schon des Öfteren gefragt, ob und wenn ja wer, seine Basis-Schriftgröße im Browser eigentlich "verstellt"?

Denn das kann ja eigentlich nur zu "Problemen" führen, denn nicht nur bei Media Queries geht man als Autor von oben erwähnter Annahme bezüglich der Basis-Schriftgröße aus.

Und da erscheint mir die Zoom-Funktion der Browser doch das geeignetere Mittel der Wahl zu sein (zumal die Browser sich die jeweilige Zoom-Einstellung per Website "merken").

Imho ist die Option in den Browsern die Basis-Schriftgröße verändern zu können, ein "Schuss in den Ofen", bzw. ein "Griff ins Klo" gewesen!
Zumindest solange, wie der eingestellte Wert nicht per CSS "verwendet" werden kann.
Dazu müsste man aber erstmal so etwas wie "Umgebungsvariablen" in CSS einführen, deren Handhabung dann aber wiederum an der fehlenden (oder max. "rudimentären") Logik in CSS scheitert.

Solange also für das Layout relevante Einstellungen im Browser nicht berücksichtigt werden können, sollte man imho tunlichst die Finger davon lassen.

Aber um deine Frage zu beantworten: Ich ziehe jeweils 1/16 von meinem nächsthöheren Breakpointwert ab.

PS: Hast du evt. auch noch einen Tipp bezüglich eines Mixins für 'resolution', bzw. 'min-device-pixel-ratio'?

Mehr als dich auf die Tips für Fragende hinzuweisen lässt diese Frage jetzt aber nicht zu. ;-)

Ja, war etwas "knapp" formuliert ...! ;-)
Dann anders gefragt: Kennst du ein fertiges Mixin, welches automatisch die diversen Vendor Prefixes und 'resolution' erstellt, wenn ich eine device-ratio angebe?

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