Ich glaube, dass in letzter Zeit der Unterschied in der Bildschirmgröße zwischen verschiedenen Gerätegruppen immer unscharfer wird. Trotzdem habe ich versucht, ein Tool zu schreiben, mit dem sowohl Gerätegruppen (Mobiltelefone, Tablets, Laptops, Desktops) als auch bestimmte Geräte (iPhone 5, iPhone X, iPad Pro 12 usw.) ermittelt werden können. Meiner Meinung nach stellte sich heraus, dass es sich um eine recht praktische Packung SASS-Mixins handelte. Das Tool ist einfach zu bedienen und ermöglicht es Ihnen, die Liste der Geräte auf Ihre eigenen zu erweitern, ohne die Quelle zu bearbeiten.
Übrigens, sehen Sie sich
die Demo hier an .
Nur ein paar Reservierungen:
- Überprüfen Sie nicht die Anpassungsfähigkeit im DevTools-Browser, da die Seitengrößen in der Querformatausrichtung des Geräts dort nicht korrekt berechnet werden . Es ist besser, auf einem realen Gerät oder in einem Simulator (z. B. xCode Simulator) zu überprüfen.
- Verwenden Sie Gruppen-CSS-Medienabfragen , um dieselben Medienabfragen zu kombinieren. Ohne diesen Code wird viel wiederholter
@media ... Code generiert @media ... wenn wir der @include device() halber das @include device() in jedem Selektor separat verwenden. Gulp-Wrapper - Gulp-Group-CSS-Media-Abfragen .
Installation
Laden Sie die Bibliothek herunter:
$ yarn add sass-mediascreen $ npm install sass-mediascreen $ curl -O https://raw.githubusercontent.com/gvozdb/sass-mediascreen/master/_mediascreen.scss
Und verbinden Sie die Mixins mit unserer Anwendung:
@import "mediascreen";
Beispiele
So können Sie bestimmte Geräte testen:
@include device(iPhone5, portrait) { // portrait orientation // iPhone 5, iPhone 5s, iPhone 5c, iPhone SE } @include device(iPhone6Plus iPhoneXR, landscape) { // landscape orientation // iPhone 6+, iPhone 6s+, iPhone 7+, iPhone 8+, iPhone XR } @include device(iPadPro10 iPadPro11 iPadPro12) { // all orientations // iPad Pro 10.5, iPad Pro 11, iPad Pro 12.9 }
Hier sind die Gerätegruppen:
@include device(desktop) { // all orientations // desktop } @include device(mobile tablet laptop, landscape) { // landscape orientation // mobile, tablet, laptop } @include device(mobile-landscape tablet laptop) { // landscape orientation // mobile // all orientations // tablet, laptop } @include device(mobile-landscape tablet laptop, portrait) { // landscape orientation // mobile // portrait orientation // tablet, laptop }
Dies sind Standard-Mixins zum Überprüfen der Bildschirmgröße (von, bis) und der aktuellen Ausrichtung des Geräts:
@include screen(min-width, max-width, orientation) {/*...*/} @include min-screen(width) {/*...*/} @include max-screen(width) {/*...*/} @include screen-height(min-height, max-height, orientation) {/*...*/} @include min-screen-height(height) {/*...*/} @include max-screen-height(height) {/*...*/} @include landscape() {/*...*/} @include portrait() {/*...*/}
Liste der unterstützten Geräte
Gruppen- Handys 320-767px -
mobile ,
mobile-portrait ,
mobile-landscape- Tablets 768-1023px -
tablet ,
tablet-portrait ,
tablet-landscape- Laptops 1024-1199px -
laptop ,
laptop-portrait ,
laptop-landscape- Desktops> = 1200px -
desktop ,
desktop-portrait ,
desktop-landscapeTelefone- iPhone 5, 5s, 5c, SE -
iphone5 ,
iphone5s ,
iphone5c ,
iphonese- iPhone 6, 6s, 7, 8 -
iphone6 ,
iphone6s ,
iphone7 ,
iphone8- iPhone 6+, 6s +, 7+, 8+ -
iphone6plus ,
iphone6splus ,
iphone7plus ,
iphone8plus- iPhone X, XS -
iphonex ,
iphonexs- iPhone XR -
iphonexr- iPhone XS Max -
iphonexsmaxTabletten- iPad 1, 2, Mini, Air -
ipad1 ,
ipad2 ,
ipadmini ,
ipadair- iPad 3, 4, Pro 9.7 "-
ipad4 ,
ipadpro9 ,
ipadpro9- iPad Pro 10.5 "-
ipadpro10- iPad Pro 11.0 "-
ipadpro11Laptops- iPad Pro 12.9 "-
ipadpro12Leider ist das iPad Pro 12 in Bezug auf die Bildschirmgröße ein Laptop!Erweiterung der Geräteliste
Wie bereits erwähnt, können Sie Unterstützung für benutzerdefinierte Geräte oder Gerätegruppen hinzufügen, ohne die Bibliotheksquelle zu bearbeiten. Dazu müssen Sie vor dem Importieren von
@import "mediascreen" die Sass-Variable
$ms-devices mit einer Liste Ihrer Geräte deklarieren:
$ms-devices: ( desktop-sm: ( group: true, // - min: 1200px, max: 1919px, ), desktop-md: ( group: true, min: 1920px, max: 2879px, ), desktop-lg: ( group: true, min: 2880px, ), pixel2xl: ( group: false, // - width: 411px, // or 412px?.. height: 823px, pixel-ratio: 3.5, ), macbook12: ( group: false, orientation: landscape, width: 1440px, height: 900px, pixel-ratio: 2, ), imac27: ( group: false, orientation: landscape, width: 5120px, height: 2880px, ), ); @import "mediascreen";
Danach können Sie Ihre Geräte sowie Standardbibliotheksgeräte überprüfen:
@include device(desktop-sm) { // desktop-sm } @include device(desktop-md) { // desktop-md } @include device(desktop-lg) { // desktop-lg } @include device(Pixel2XL, landscape) { // landscape orientation // Google Pixel 2XL } @include device(MacBook12) { // landscape orientation // MacBook 12 } @include device(iMac27) { // landscape orientation // iMac 27 }
Referenzen
Bibliothek auf GithubBibliothek im Npm-RepositoryDemoseite