it-swarm.com.de

Ausgefallene Medienabfragen mit etwas WENIGER Magie

Es wäre schön, CSS-Stile für verschiedene Auflösungen in einigen CSS-Klassen mit weniger zu verpacken.

Ich würde gerne etwas machen wie:

footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}

Am Ende sollte so etwas das Ergebnis sein:

footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}

.tablet könnte so aussehen:

@media screen and (min-width: 768px) {
  .tablet {

  }
}

Hoffe jemand hat eine nette Idee!

78
Andre Zimpel

Folgendes habe ich in meinen Projekten getan:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

@media @desktop {
  footer {
    width: 940px;
  }
}

@media @tablet {
  footer {
    width: 768px;
  }
}

Auf diese Weise können Sie Ihre Medienabfragen nur einmal definieren und in weniger Dateien verwenden. Auch etwas leichter zu lesen. :)

218
Hai Nguyen

Ich stimme der Antwort von Hai Nguyen (die angenommen wurde) voll und ganz zu, aber Sie können es ein bisschen mehr aufräumen, indem Sie so etwas tun:

@desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

footer{
  width: 100%;
  @media @tablet {
    width: 768px;
  }
  @media @desktop {
    width: 940px;
  }
}

Im Grunde ist es dasselbe, aber Sie können Ihre Medienabfragen innerhalb des ursprünglichen Selektors verschachteln. Es hält alle CSS für ein bestimmtes Element zusammen und macht Ihre Stile viel modularer (im Vergleich zum Split-Breakpoint-Ansatz).

110
Joseph Yancey

+1 für Nguyen und Yancey - und noch eine Ergänzung.

Wenn Sie explizite Definition der Breiten wollen, können Sie dies mit string interpolation und Variablen für Ihre Haltepunkte. Hier zum Beispiel mit denen von bootstrap - die strengen Regeln sollen verhindern, dass sich Definitionen überschneiden.

@screen-xs-min:     480px;
@screen-sm-min:     768px;
@screen-md-min:     992px;
@screen-lg-min:     1200px;

@screen-xs-max:     (@screen-sm-min - 1);
@screen-sm-max:     (@screen-md-min - 1);
@screen-md-max:     (@screen-lg-min - 1);

@phone:             ~"only screen and (max-width: @{screen-xs-min})";
@phone-strict:      ~"only screen and (min-width: @{screen-xs-min}) and (max-width: @{screen-xs-max})";
@tablet:            ~"only screen and (min-width: @{screen-sm-min})";
@tablet-strict:     ~"only screen and (min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";
@desktop:           ~"only screen and (min-width: @{screen-md-min})";
@desktop-strict:    ~"only screen and (min-width: @{screen-md-min}) and (max-width: @{screen-md-max})";
@large:             ~"only screen and (min-width: @{screen-lg-min})";

footer{
    width: 100%;
    @media @tablet {
        width: 768px;
    }
    @media @desktop {
        width: 940px;
    }
}
42
SunnyRed

Und Sie können auch Medienabfragen wie diese kombinieren

@media @desktop, @tablet, @ipad{ 

//common styles... 

}
8
kedomonzter

Ich benutze diese Mixins & Variablen

.max(@max; @rules){@media only screen and (max-width: (@max - 1)){@rules();}}
.min(@min; @rules){@media only screen and (min-width: @min){@rules();}}
.bw(@min; @max; @rules){@media only screen and (min-width: @min) and (max-width: (@max - 1)){@rules();}}

@pad: 480px;
@tab: 800px;
@desktop: 992px;
@hd: 1200px;

Also das

footer{
    width: 100%;
    .bw(@tab,@desktop,{
        width: 768px;
    });
    .min(@desktop,{
        width: 940px;
    });
}

wird

footer {
  width: 100%;
}
@media only screen and (min-width: 800px) and (max-width: 991px) {
  footer {
    width: 768px;
  }
}
@media only screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}
4
Atul Gupta

Wir verwenden ein Setup wie dieses:

@vp_desktop:    801px;
@vp_tablet:     800px;
@vp_mobile:     400px;

.OnDesktop(@rules) { @media screen and (min-width:@vp_desktop){ @rules(); } };
.OnTablet(@rules) { @media screen and (max-width:@vp_tablet){ @rules(); } };
.OnMobile(@rules) { @media screen and (max-width:@vp_mobile){ @rules(); } };

Sie müssen nur Variablen setzen, die Mixins erledigen den Rest, so dass es sehr einfach zu pflegen und dennoch flexibel ist:

div {
  display: inline-block;
  .OnTablet({
    display: block;
  });
}

Es ist erwähnenswert, dass, obwohl diese Technik sehr einfach ist, Ihre CSS-Ausgabe bei unsachgemäßer Verwendung voller Medienabfragen ist. Ich versuche, meine Medienabfragen auf 1 Haltepunkt pro Datei zu beschränken. Wobei eine Datei header.less oder search.less wäre.

N.B. Diese Methode wird wahrscheinlich erst kompiliert, wenn Sie den Javascript-Compiler verwenden.

3
M_Willett

Und das habe ich für mein Projekt verwendet:

    @mobile:   ~"only screen and (min-width: 320px) and (max-width: 767px)";
    @tablet:    ~"only screen and (min-width: 768px) and (max-width: 991px)";
    @ipad:    ~"only screen and (min-width: 992px) and (max-width: 1024px)";

    @media @mobile {
      .banner{
        width: auto;
      }
    }

    @media @tablet {
      .banner{
        width: 720px;
      }
    }

  @media @ipad {
      .banner{
        width: 920px;
      }
    }
0
Sunil Rajput