2016-04-22 11 views
0

Ich verwende die folgenden reaktions mixin in sass:Responsive Mixins Breite vs Gerätebreite

@mixin macbook-pro { 
    @media (min-width: #{$macbook-pro-width}) and (max-width: #{$desktop-width - 1px}) { 
    @content; 
    } 
} 

Allerdings habe ich Haltepunkte, wo die Schriftgröße ändert. Bei einer Browserbreite von 1920 beträgt die Schriftgröße beispielsweise 18 Pixel. Wenn der Browser in der Breite abnimmt, wird die Schriftgröße schließlich 14px (um kleinere Bildschirmauflösungen zu berücksichtigen). Wie kann ich sicherstellen, dass die Schriftgröße gleich bleibt, wenn sich die Browserbreite ändert, aber wenn sich die Bildschirmauflösung ändert, ändert sich die Schriftgröße.

Also grundsätzlich will ich es so, dass wenn die Browserbreite 1920px mit Bildschirmauflösung von 1920 ist, die Schriftgröße 18px beträgt. Wenn Sie das Fenster verkleinern, bleibt die Schriftgröße bei 18px.

Wenn jedoch die Bildschirmauflösung 1440 Pixel beträgt und die Browserbreite 1440 Pixel beträgt, beträgt die Schriftgröße 14 Pixel. Wenn Sie das Fenster verkleinern, bleibt die Schriftgröße bei dieser Bildschirmauflösung gleich.

Ich habe versucht, Gerät-Min-Breite anstelle von Min-Breite, aber ich vermute, es gibt einige Nachteile zu verwenden, dass.

Antwort

0

Welche Einheiten verwenden Sie derzeit für Ihre Schriftgröße?

Sofern ich nicht falsch verstanden habe, sollten Sie in der Lage sein, einfach die Schriftgröße in einer Medienabfrage für jede Auflösung festzulegen.

Verwenden Sie px oder prozentbasiertes Sizing?

Verwandte Themen