Unterschiede
Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Nächste Überarbeitung | Vorhergehende Überarbeitung | ||
webworking:sass:mixins:responsive_webdesign_breakpoint_mixin [20.09.2014 21:52] cbeier angelegt |
webworking:sass:mixins:responsive_webdesign_breakpoint_mixin [02.12.2020 21:16] (aktuell) cbeier |
||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
# Responsive Webdesign Breakpoint Mixin | # Responsive Webdesign Breakpoint Mixin | ||
- | Bei David Hellmann habe ich in seinem (sehr interessanten und lesenswerten) Artikel "[[http:// | + | Bei David Hellmann habe ich in seinem (sehr interessanten und lesenswerten) Artikel "[[https:// |
- | < | + | < |
// Media Query | // Media Query | ||
$media-direction: | $media-direction: | ||
@mixin breakpoint($values, | @mixin breakpoint($values, | ||
- | |||
@if length($values) > 1 { | @if length($values) > 1 { | ||
$min: nth($values, | $min: nth($values, | ||
$max: nth($values, | $max: nth($values, | ||
- | + | ||
@if unitless($max) { | @if unitless($max) { | ||
$max: $max + 0px; | $max: $max + 0px; | ||
} | } | ||
- | + | ||
@if unitless($min) { | @if unitless($min) { | ||
$min: $min + 0px | $min: $min + 0px | ||
} | } | ||
- | + | ||
@media screen and (min-width: $min) and (max-width: $max) { | @media screen and (min-width: $min) and (max-width: $max) { | ||
@content; | @content; | ||
} | } | ||
- | |||
} @else { | } @else { | ||
- | |||
@if unitless($values) { | @if unitless($values) { | ||
$values: $values + 0px; | $values: $values + 0px; | ||
Zeile 42: | Zeile 39: | ||
#page { | #page { | ||
width: 1200px; | width: 1200px; | ||
- | | + | |
@include breakpoint(1024px) { | @include breakpoint(1024px) { | ||
width: 960px; | width: 960px; |