Es wäre ziemlich cool, wenn wir das eines Tages in CSS könnten. Die beste Idee dafür, auf die ich gestoßen bin, ist, sie in einem <meta>-Tag im <head> zu definieren. So könnten (vielleicht) CSS und JS sie nutzen. Wie window.matchMedia(nameOfMyMediaQuery) oder @media (nameOfMyMediaQuery) { }. Aber da wir das nicht können, hat Sass uns im Rücken. Nun stellt sich die Frage: Wie benennen wir sie?
In Sass würde das @mixin ungefähr so aussehen
@mixin breakpoint($point) {
@if $point == papa-bear {
@media (max-width: 1600px) { @content; }
}
@else if $point == mama-bear {
@media (max-width: 1250px) { @content; }
}
@else if $point == baby-bear {
@media (max-width: 650px) { @content; }
}
}Und man würde es so verwenden
.module {
width: 25%;
@include breakpoint(baby-bear) {
width: 100%;
}
}Obwohl ich in Wirklichkeit etwas wie „bp“ bevorzuge, einfach weil es kürzer ist und man es die ganze Zeit tippen muss. Deshalb wäre „+“ so ideal anstelle von „@include“. Aber ich schweife ab. Oder man könnte es im Brandon Mathis Style machen.
$name1: 320px;
$name2: 500px;
$name3: 600px;
$name4: 992px;
@mixin at-least($device-width) {
@media screen and (min-width: $device-width) {
@content
}
}
@mixin until($device-width) {
@media screen and (max-width: $device-width - 1) {
@content
}
}Die Namen sollten tatsächliche Zahlen vermeiden. Der Punkt hier ist, einen Namen mit abstrahierter Bedeutung zu vergeben, damit sich die Zahlen ändern können, aber die Namen gleich bleiben. Ich würde auch Gerätenamen wie „iPad“ oder was auch immer vermeiden, weil das einfach falsche Erwartungen weckt und sich schnell überlebt.
Besser sind Namensschemata, die Beziehungen zwischen den Namen selbst suggerieren. Wo einer offensichtlich größer oder kleiner ist als ein anderer. Natürlich geht es hierbei um Abfragen der Breite, die sicherlich am gebräuchlichsten sind. Aber natürlich könnten Ihre Media Queries anders oder komplexer sein, und das Namensschema sollte das widerspiegeln.
Hier sind einige Ideen
baby-bear
mama-bear
papa-bear
straw-house
stick-house
brick-house
private
corporal
sergeant
captain
major
lieutenant
colonel
general
alpha
beta
gamma
delta
epsilon
very-small
klein
mittel
groß
very-large
–
—
—
—-
——
>-< [---] <----->
seed
seedling
sprout
plant
pebble
stone
rock
boulder
pawn
knight
queen
king
bishop
archbishop
cardinal
pope
eddard
catelyn
robb
sansa
arya
bran
rickon
knife
dagger
scimitar
claidmore
A
B
C
D
E
Von Vince Speelman
lil-bowow
eminem
jay-z
krs-one
rick-ross
Von James Nowland
matryoshka-doll
the-one-inside-matryoshka-doll
the-one-inside-the-one-inside-matryoshka-doll
the-one-inside-the-one-inside-the-one-inside-matryoshka-doll
Von Philip Brown
michael
jermaine
jackie
marlon
tito
Von Rob Stinogle
gandalf-the-gray
gandalf-the-white
Von Darby Brown
stewie
brian
Chris
lois
Peter
(Ich lasse Meg weg)
Haben Sie noch andere Ideen?
Ich weiß, dass sie jetzt die SCSS-Syntax vorantreiben, aber ich arbeite an einem Projekt mit Django und Coffeescript, und in diesem Szenario erscheint es mir natürlicher, SASS zu verwenden, da die Syntax den anderen von mir genannten Sprachen ähnlicher ist. Der Grund, warum ich das erwähne, ist, dass ich auch erkannt habe, dass „@include“ in der SASS-Syntax einfach „+“ ist, wie Sie angedeutet haben. Sobald ich das gesehen habe, habe ich mich gefragt, warum wir „@include“ mit der SCSS-Syntax verwenden müssen, aber „+“ mit SASS funktioniert.
Vermutlich, weil SCSS mit CSS kompatibel sein soll, während SASS das nicht ist? Aber da es eine Obermenge ist, könnten sie + als Alternative hinzufügen.
Ich freue mich, dass Sie einen Beitrag dazu geschrieben haben, denn ich hätte das auch getan, nachdem ich gesehen hatte, wie viele Aufrufe mein Beitrag auf Dribbble kürzlich erhalten hat. Es ist wichtig, in jedem Aspekt des Designs und/oder der Entwicklung alle vorgefassten Meinungen abzulegen, die einschränkend sein könnten (d. h. die Standard- aber immer weniger beliebten Media-Queries bei 320px, 480px, 1024px nur wegen iDevices).
Um diesen Gedanken weiterzuführen, habe ich mich daran gewöhnt, die Idee von Pixeln im Allgemeinen zu verwerfen, weil sie eine feste Bedeutung haben. Wir sollten in Bezug auf Proportionen und Verhältnisse denken und nicht an etwas Konkretes in allen Aspekten, wenn wir für das Web erstellen; der Prozess der Erstellung für das Web sollte durchgängig rein sein. Ich habe irgendwo Gespräche über die Umwandlung von px in ems mit Mixins gesehen, aber meiner Meinung nach ist das immer noch ein Denken wie ein *alter Opa*. Es spielt keine Rolle, ob Sie Ihre Einheiten umwandeln, Sie stecken immer noch im Denken von absolut und perfekt fest. Ich bin aber jung, also vielleicht bin ich es nur!
Danke für den Retweet übrigens. Großer Fan von shoptalk und css-tricks!
charmander
charmeleon
charizard
nokia
palm
sonyericsson
iphone
droid
note
Das erinnert mich an diesen tollen Beitrag über die Benennung von Computern. (Machen Sie sich keine Sorgen um das Design, das wurde eindeutig von einem Sysadmin erstellt.)
Beispiele: Nordische Götter, Muppets, Pokémon :P
Welches Design? :) Da ist kein CSS drin!
Ich persönlich befürworte dieses Design. Nur 5 Anfragen...lädt in einer Sekunde ;)
Ich habe mich von etwas auf meinem Schreibtisch inspirieren lassen...
short
tall
grande
venti
und mein hidpi heißt espresso
Es ist einfach hängen geblieben und ich benutze es seit Monaten.
Ich wollte gerade dasselbe sagen. Ich benutze short, tall, grande, venti – und ich mag nicht mal Kaffee! Habe aber eine Weile bei Starbucks gearbeitet und habe einen Bruder, der das immer noch tut.
Das mache ich auch, nur dass ich tall als kleinstes und trenta als größtes verwende.
picard<br/>
riker<br/>
data<br/>
la-forge<br/>
worf
Hobbit<br/>
Dwarf<br/>
Man<br/>
Wizard<br/>
Elf<br/>
Valar
Ich nenne meine Schritt 1, Schritt 2, Schritt 3 usw.
Abhängig vom Projekt habe ich manchmal nur zwei, manchmal aber auch bis zu sechs Schritte.
Ich definiere sie als Variablen in LESS...
...und wende sie so an
Ich bevorzuge „step“ gegenüber „breakpoint“, weil ich mich normalerweise auf einen Breitenbereich beziehe und nicht auf einen bestimmten Wert.
Ich habe früher Abkürzungen wie
@phoneund@desktopverwendet, aber sie waren nicht ganz genau – und sie „Step X“ zu nennen scheint Verwirrung zu vermeiden, wenn ich mit meinen Kollegen spreche.Ich schätze, das macht mich zu dem langweiligen.
Ich hatte gerade ein langes Gespräch darüber, wie man Media Queries benennt. Wir dachten, Kaffeesorten seien am besten.
Short, Tall, Grande, Venti, Trenta, Depth Charge.
Wenn Sie nach der Tatsache Zwischengrößen benötigen, können Sie „with room“ oder „no whip“ hinzufügen. Es ist perfekt!
Ich habe immer das Gefühl, dass die Benennung Ihrer Breakpoints eine ziemlich umständliche Sache ist, wenn 320/444/732 ein viel schnellerer Weg ist, Dinge mit Sass zu erledigen. Ich verstehe irgendwie einen Grund, sie zu benutzen. Aber im Gegensatz zum Ändern einer $brand-color glaube ich nicht, dass es jemals eine Zeit geben würde, in der man die Media-Query einer Website um ein paar EMs oder Pixel erhöht.
Zu diesem Zweck habe ich mein eigenes Sass-Mixin geschrieben, das $variable Breakpoints und die Möglichkeit ermöglicht, einen Wert (in px) zu übergeben, der in EMs umgewandelt wird.
Es ist hier in Codepen – http://codepen.io/sturobson/pen/keuyp
Tolle Liste! Es ist schön, ein bisschen Spaß mit dem Programmieren zu verbinden.
Hier ist meine
Initiate
Padawan
Knight
Master
NICHT URTEILEN SIE MICH!
Vom Handheld-Gerät zum großen Desktop-Bildschirm
gollum
bilbo
gimly
aragorn
gandalf
balrog
Außerdem sollte *eye-of-sauron* Retina-Geräte abgleichen.
Ich benutze die Bären, fand es ordentlich und intuitiv. Ich habe es erweitert auf
baby-bear
toddler-bea
brother-bear
mama-bear
auntie-bear
uncle-bear
papa-bear
Ich benutze auch ein leicht anderes Mixin, mit einigen optionalen Parametern wie dem Setzen von „max“/„min“, „width“/„height“.
csswizardry-grids verwendet palm, lap, portable für palm+lap, lap-and-up für alles größere als palm, desk und desk-wide.
Das benutze ich auch. Es vermeidet, zu spezifisch für Geräte wie „mobile“ oder „cellphone“ oder „tablet“ zu sein, bleibt aber relevant dafür, wie die Seite angezeigt wird. Ich liebe ein bisschen Humor in meinem Code, aber ständig Dinge wie „papa bear“ oder „darth vader“ in mein CSS einzugeben, ist unglaublich mühsam.
Hier ist eine etwas nerdige Variante, Transformer-Größenklassen :)
minicon
scout
deluxe
voyager
ultra
leader
supreme
Kitten
Katze
Leapard
Panther
Tiger
Lion
Tiger sind größer als Löwen...
Und Leoparden sind in den meisten Fällen größer als Panther.
Ich habe früher verwendet
start-mobile
start-tablet
start-desktop
aber jetzt
sparrow
pigeon
raven
buzzard
eagle
Das funktioniert für mich....
alles, was aufgerufen werden muss, ist
Natürlich! Wir brauchen Jedi-Level;
Initiate
Padawan
Knight
Master
Councilor
Grand Master
oder Sith-Level;
Minion
Assassin
Adept
Acolyte
Warrior
Marauder
Lord
Dark Lord
Ich bin auf Ihrer Wellenlänge, Aaron… arbeite gerade an einem Projekt und es ist für mich *äußerst* hilfreich, Folgendes zu verwenden:
ewok
wookiee
wampa
Mir gehen allerdings die Pelztiere aus… also hoffe ich, dass ich keine weiteren Breakpoints benötige, bevor ich fertig bin!
Muss man nicht Großmeister sein, um im Rat zu sitzen?
Wenn Luke Wroblewski sich geäußert hätte, wären seine
wrist
palm
lap
desk
wall
Homer
Marge
Bart
Lisa
Maggie
<=IE8 Grandpa Simpson
Eine Weile lang verwendete ich Planetengrößen (bevor ich den 320-Pixel-und-mehr-Stil verwendete)
Jupiter (min-width 1440px)
Saturn (max-width 1439px)
Uranus (max 1280)
Neptun (max 1024)
Erde (max 800)
Venus (max 650)
Mars (max 568)
Merkur (max 400)
Und ich füge immer einen benutzerdefinierten Eintrag am Ende der else if-Reihe hinzu, der einfach besagt, dass, wenn es nicht in dieser Liste war, der Wert direkt in der Mediaquery als max-width gedruckt wird (wiederum, bevor ich 320 war).
@else { @media(max-width: $point) { @content; } }
Jetzt stelle ich jedoch fest, dass ich mehr Media Queries für einzelne Module mit ungeraden Zahlen verwende, daher habe ich die obige Anweisung praktisch zum gesamten Breakpoint-Mixin gemacht.
@mixin bp($point) {
@media screen and (min-width: $point/16 + em) { @content; }
}
Ich bin überrascht, dass niemand Bier verwendet hat
AMBER
BLONDE
BROWN
CREAM
DARK
Offensichtlich...
Baby shark ♪ do do, do do do do ♪
Mama shark ♪ do do, do do do do ♪
Papa shark ♪ do do, do do do do ♪
Swimmer ♪ do do, do do do do ♪
Wenn ich nicht mit meinen Matroschkas spiele und versuche, professionell zu sein, benutze ich dieses System
Media Queries
Reihenfolge von klein nach groß.
extra-small, small, medium, large, larger, huge, massive.
Wenn Sie weitere Breakpoints hinzufügen müssen, schlage ich derzeit die Verwendung von Nummerninkrementen vor, wie folgt:
Bei großen Websites stelle ich fest, dass man manchmal einen Punkt zwischen den ursprünglich zu Beginn festgelegten Media Queries finden muss, daher ist die Zahleninkrementierung normalerweise eine gute Lösung.
@mixin breakpoint($point) { @if $point == massive { @media (min-width: 120em) { @content; } } @else if $point == huge { @media (min-width: 100em) { @content; } } @else if $point == larger { @media (min-width: 75em) { @content; } } @else if $point == large { @media (min-width: 60em) { @content; } } @else if $point == medium { @media (min-width: 54em) { @content; } } @else if $point == small { @media (min-width: 30em) { @content; } } @else if $point == extra-small { @media (min-width: 20em) { @content; } } }Für etwas mehr dazu hier ist ein Link zu einem Gist für dieses Mixin-Partial.
Meine Liste
Chuck Norris
Ups. Versehen. Meine Liste
Everything
Chuck Norris
Ich persönlich verwende das Größenschema, das im Beitrag vorgestellt wird, dann aber ähnlich wie Kleidergrößen abgekürzt.
XXS
XS
S
M
L
XL
XXL
Obwohl die anderen Vorschläge Spaß machen, glaube ich nicht, dass sie sehr klar sind. Ein weiterer Vorteil ist, dass es einfach ist, später zusätzliche Breakpoints einzufügen.
Schön! +1
Ich benutze das Größenthema auch auf einigen meiner Seiten. Das ist wirklich hilfreich.
Aber es gibt noch viele weitere Optionen, schätze ich. Aber wenn man Shops hat, ist es eine clevere Methode :)
Tree
Branch
Leaf
Biere :: Schlechtestes Bier = das kleinste && Bestes Bier = das größte
-Natural Ice
–PBR
—Blue Moon (vom Fass natürlich)
—-Miller Lite
baby
mom
dad
/--------\ | o o | | {oo} | \ ^^^^ / ----mustache-pig guy
Bitte verzeihen Sie mir =)
3э
3=э
3==э
3====Э
Ich bin neu bei scss, aber ich liebe diese Tricks sehr... sehr flexibel.
Ich bin neu bei scss, aber ich liebe diese Tricks sehr... sehr flexibel.
Naming
Universe
Galaxy
Solarsystem
Earth
Asia
:)
Hallo Chris,
Media Query wiederholt sich und das macht mich verrückt. Habe ich etwas verpasst.
@mixin breakpoints($points) { @if $points == papabear { @media only screen and (max-width:1600px) { @content; } } @else if $points == mamabear { @media only screen and (max-width:1200px ) { @content; } } @else { @media only screen and (max-width:768px) { @content; } } } .wrapper { width:960px; margin: 0 auto; @include breakpoints(babybear){ width:100%; } } .span1 { width:200px; @include breakpoints(mamabear){ width:150px; } @include breakpoints(babybear){ width:100%; } }outputs
.wrapper { width: 960px; margin: 0 auto; } @media only screen and (max-width: 768px) { .wrapper { width: 100%; } } .span1 { width: 200px; } @media only screen and (max-width: 1200px) { .span1 { width: 150px; } } @media only screen and (max-width: 768px) { .span1 { width: 100%; } }Sie sehen, dass es 2 Media Queries mit denselben Breakpoints (768px) gibt, aber ich möchte, dass diese Klassen in derselben Media Query geschrieben werden, ohne sich zu wiederholen. Wie ist das möglich?
Nach Pferderassen
Shetland
Arabian
Paint
Thoroughbred
Clydesdale
Shire
Es gibt eine stabile, voll ausgestattete Compass-Erweiterung namens Breakpoint, die all die Dinge tut, die in diesem Beitrag besprochen werden. Ich finde es etwas seltsam, dass fast jeder Kommentator in diesem Thread Breakpoints benennen möchte, sich dann aber auf drei oder vier insgesamt beschränkt (unabhängig von den verwendeten „nicht-Geräte“-Namen).
Wenn ich die Breakpoint-Erweiterung verwende, hat mein typisches Projekt am Ende 20-40 verschiedene Media Queries. Warum? Weil sie alle auf meinen Inhalt zugeschnitten sind und nicht auf eine willkürliche Linie, die Geräte (oder plump die Linie zwischen „populären“ Auflösungen) abbildet.
Das Endergebnis ist ein wirklich flüssiges Layout bei jeder Auflösung, anstatt eines, das um ein paar Breakpoints gut aussieht, aber dazwischen irgendwie seltsam aussieht. Einige Beispiele
nav-sm,nav-md,nav-lgfooter-md,footer-lg,footer-widelogin-md,login-lgmain-cta-sm,main-cta-wideJa, Sie werden am Ende drei oder vier dieser Labels mit demselben Wert haben. Und das ist in Ordnung. Denn in dem Moment, in dem Sie eines ändern müssen, müssen Sie die anderen nicht ändern. Sie werden viel weniger Suchen und Ersetzen durchführen.
Habe ich erwähnt, dass es Ihre PX-Werte automatisch in EM umwandeln kann? Das ist ziemlich schick.
Außerdem wäre es fahrlässig, die Funktion für No-Query-Fallback nicht zu erwähnen, die auf bedingten
<html>-Klassen beruht, um reine CSS, für alte IE-kompatible Layouts ohne zusätzlichen Aufwand bereitzustellen.Probieren Sie Breakpoint, lesen Sie die Dokumentation und ändern Sie die Art und Weise, wie Sie mit Media Queries arbeiten!
Wie wäre es mit
robin
batman
superman
Ich teste das noch, aber ich habe festgestellt, dass das Entfernen der Logik aus dem Breakpoint-Mixin zu saubererem Code führt. Meine Implementierung sieht so aus
@mixin wb($point) {
@media(min-width: $point) { @content; }
}
@mixin hb($point) {
@media(min-height: $point) { @content; }
}
Ich arbeite immer vom Kleinsten nach außen, wenn ich ein Element definiere, das Media Queries benötigt, daher scheint dies sehr reibungslos zu funktionieren und erfordert nichts weiter als ein gut benanntes Set von Variablen. Ich habe mich für Pawn -> King entschieden. Das bietet eine gute Vielfalt an steigenden Skalenordnungen, ohne sich an ein Gerät zu binden, und bedeutet, dass Sie das Mixin auf eine Weise aufrufen können, die Ihrer ursprünglichen Empfehlung sehr ähnlich ist.
.foo {
@include wb($pawn) {
color: #FFF; }
}
Was uns gibt
@media (min-width: 320px) {
.foo {
color: #FFF; } }
(Dieses Beispiel ist offensichtlich völlig nutzlos und sollte niemals als gute Idee angesehen werden, aber es demonstriert das Grundkonzept)
Meine sind ganz einfach
fucking-small
klein
mittel
groß
fucking-large
Für diejenigen von uns, die Spanisch sprechen, habe ich mich jetzt entschieden, meine Media Queries so zu benennen
la-chilindrina (fucking-small)
el-chavo (small)
kiko (medium)
señor-barriga (large)
profesor-girafales (fucking-large)
don-ramon (retina)
Oh boy, lol.
jordan
pippen
rodman
Danke für den Tipp @chriscoyier. Nach meinem letzten RWD-Projekt habe ich Ihr Beispiel ein wenig vereinfacht, da die Anzahl der Breakpoint-Geltungsbereiche etwas lächerlich wurde.
Sicherlich könnte jeder bei Bedarf em/rem-Werte ergänzen, aber dies gibt mir die größte Flexibilität, willkürliche Inhaltsbrüche zu berücksichtigen, während die Anzahl der Variablen, an die ich mich in meinen Stylesheets erinnern muss, reduziert wird.
Zusätzlich macht das Dokumentieren spezifischer Breakpoints wie in meinem Beispiel mit
// @mqfix ...es sehr einfach, sie in ST2 zu finden und sich an den genauen Grund für die Verwendung dieses speziellen Breakpoints zu erinnern.iPhone
iPad
Desktop
oder das obige Beispiel ist bereits gut
baby-bear
mama-bear
papa-bear
Danke! Diese Methode ist sehr nützlich und macht Spaß.
.. und ich liebe die Schach-Version :)
pawn
knight
queen
king
Nette Idee! So macht es alles mehr Spaß. :)
Ich würde noch etwas Musik hinzufügen
violin
viol
cello
bass
tolle Idee, Alter…
Danke! Ich brauchte das.