Creo que recientemente la diferencia en el tamaño de la pantalla entre diferentes grupos de dispositivos se está volviendo más borrosa. A pesar de esto, intenté escribir una herramienta para determinar grupos de dispositivos (teléfonos móviles, tabletas, computadoras portátiles, computadoras de escritorio) y dispositivos específicos (iPhone 5, iPhone X, iPad Pro 12, etc.). Resultó, en mi opinión, un paquete bastante conveniente de SASS mixins. Y lo que es más importante, la herramienta es fácil de usar y también le permite expandir la lista de dispositivos a los suyos sin editar la fuente.
Por cierto,
mete la demo aquí .
Solo un par de reservas:
- No verifique la adaptabilidad en el navegador DevTools, los tamaños de los lados en la orientación horizontal del dispositivo no se calculan allí correctamente . Es mejor verificar en un dispositivo real o en un simulador (por ejemplo, xCode Simulator).
- Use group-css-media-queries para combinar las mismas consultas de medios. Sin él, se genera una gran cantidad de código
@media ... repetitivo @media ... si por conveniencia usamos el @include device() en cada selector por separado. Gulp wrapper - gulp-group-css-media-queries .
Instalación
Descargue la biblioteca:
$ yarn add sass-mediascreen $ npm install sass-mediascreen $ curl -O https://raw.githubusercontent.com/gvozdb/sass-mediascreen/master/_mediascreen.scss
Y conecte los mixins a nuestra aplicación:
@import "mediascreen";
Ejemplos
Así es como puede probar dispositivos específicos:
@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 }
Aquí están los grupos de dispositivos:
@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 }
Y estos son mixins estándar para verificar los tamaños de pantalla (de, a) y la orientación actual del dispositivo:
@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() {/*...*/}
Lista de dispositivos compatibles
Grupos- Móviles 320-767px -
mobile ,
mobile-portrait mobile-landscape- Tabletas 768-1023px -
tablet ,
tablet-portrait ,
tablet-landscape- Portátiles 1024-1199px -
laptop ,
laptop-portrait ,
laptop-landscape- Escritorios> = 1200px -
desktop ,
desktop-portrait ,
desktop-landscapeTeléfonos- 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 -
iphonexsmaxTabletas- iPad 1, 2, Mini, Aire -
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 "-
ipadpro12¡Ay, en términos de tamaño de pantalla, el iPad Pro 12 es una computadora portátil!Ampliación de la lista de dispositivos.
Como dije anteriormente, puede agregar soporte para dispositivos personalizados o grupos de dispositivos sin editar la fuente de la biblioteca. Para hacer esto, antes de importar
@import "mediascreen" , debe declarar la variable Sass
$ms-devices con una lista de sus dispositivos:
$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";
Después de eso, puede verificar sus dispositivos, así como los dispositivos de biblioteca estándar:
@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 }
Referencias
Biblioteca en githubBiblioteca en el repositorio de NpmPágina de demostración