Sass MediaScreen - Définition des périphériques CSS

Je crois que récemment, la différence de taille d'écran entre les différents groupes d'appareils devient de plus en plus floue. Malgré cela, j'ai essayé d'écrire un outil pour déterminer à la fois des groupes d'appareils (téléphones mobiles, tablettes, ordinateurs portables, ordinateurs de bureau) et des appareils spécifiques (iPhone 5, iPhone X, iPad Pro 12, etc.). Il s'est avéré, à mon avis, un pack plutôt pratique de mixins SASS. Et surtout, l'outil est facile à utiliser et vous permet également d'étendre la liste des appareils à votre propre sans modifier la source.


Au fait, piquez la démo ici .

Juste quelques réservations:

• Ne vérifiez pas l'adaptabilité dans le navigateur DevTools, les tailles des côtés en orientation paysage de l'appareil n'y sont pas calculées correctement . Il est préférable de vérifier sur un appareil réel ou dans un simulateur (par exemple, xCode Simulator).
• Utilisez group-css-media-queries pour combiner les mêmes requêtes multimédias. Sans cela, beaucoup de code @media ... répétitif est généré @media ... si, pour des raisons de commodité, nous utilisons @include device() le @include device() dans chaque sélecteur. Gulp wrapper - gulp-group-css-media-queries .

L'installation

Téléchargez la bibliothèque:

 $ yarn add sass-mediascreen  $ npm install sass-mediascreen  $ curl -O https://raw.githubusercontent.com/gvozdb/sass-mediascreen/master/_mediascreen.scss 

Et connectez les mixins à notre application:

 @import "mediascreen"; 

Des exemples

Voici comment tester des appareils spécifiques:

 @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 } 

Voici les groupes d'appareils:

 @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 } 

Et ce sont des mixins standard pour vérifier les tailles d'écran (de, à) et l'orientation actuelle de l'appareil:

 @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 des appareils pris en charge

Les groupes

- Mobiles 320-767px - mobile , mobile-portrait , mobile-landscape
- Tablettes 768-1023px - tablet , tablet-portrait , tablet-landscape
- Ordinateurs portables 1024-1199px - laptop , laptop-portrait , laptop-landscape
- Ordinateurs de bureau> = 1200px - desktop , desktop-portrait , desktop-landscape

Téléphones

- 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 - iphonexsmax

Tablettes

- 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 "- ipadpro11

Portables

- iPad Pro 12,9 "- ipadpro12

Hélas, en termes de taille d'écran, l'iPad Pro 12 est un ordinateur portable!

Extension de la liste des appareils

Comme je l'ai dit précédemment, vous pouvez ajouter la prise en charge de périphériques personnalisés ou de groupes de périphériques sans modifier la source de la bibliothèque. Pour ce faire, avant d'importer @import "mediascreen" , vous devez déclarer la variable $ms-devices Sass avec une liste de vos appareils:

 $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"; 

Après cela, vous pouvez vérifier vos périphériques ainsi que les périphériques de bibliothèque standard:

 @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 } 

Les références

Bibliothèque sur github
Bibliothèque dans le référentiel Npm
Page de démonstration