Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- 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
-Bei David Hellmann habe ich in seinem (sehr interessanten und lesenswerten) Artikel "[[http://davidhellmann.com/blogging/css-media-queries-das-problem-mit-fixen-breakpoints-2433/|CSS Media Queries: Das Problem mit fixen Breakpoints]]" ein kleines Mixin gefunden. Mit diesem können die Breakpoints sehr einfach und elegant geschrieben werden, ohne das "media screen" Gedöhns jedesmal wiederholen zu müssen.
+Bei David Hellmann habe ich in seinem (sehr interessanten und lesenswerten) Artikel "[[https://davidhellmann.com/blog/development/css-media-queries-das-problem-mit-fixen-breakpoints|CSS Media Queries: Das Problem mit fixen Breakpoints]]" ein kleines Mixin gefunden. Mit diesem können die Breakpoints sehr einfach und elegant geschrieben werden, ohne das "media screen" Gedöhns jedesmal wiederholen zu müssen.
-<code>
+<code sass>
 // Media Query
 $media-direction: max;
 @mixin breakpoint($values, $direction: $media-direction) {
   @if length($values) > 1 {
     $min: nth($values,1);
     $max: nth($values,2);
     @if unitless($max) {
       $max: $max + 0px;
     }
     @if unitless($min) {
       $min: $min + 0px
     }
     @media screen and (min-width: $min) and (max-width: $max) {
       @content;
     }
   } @else {
     @if unitless($values) {
       $values: $values + 0px;
@@ Zeile 42: / Zeile 39: @@
 #page {
   width: 1200px;
   @include breakpoint(1024px) {
     width: 960px;