Acredito que, recentemente, a diferença no tamanho da tela entre diferentes grupos de dispositivos está se tornando mais desfocada. Apesar disso, tentei escrever uma ferramenta para determinar grupos de dispositivos (telefones celulares, tablets, laptops, desktops) e dispositivos específicos (iPhone 5, iPhone X, iPad Pro 12, etc.). Acabou, na minha opinião, um pacote bastante conveniente de mixins SASS. E, o mais importante, a ferramenta é fácil de usar e também permite expandir a lista de dispositivos por conta própria, sem editar a fonte.
A propósito,
dê uma olhada na demo aqui .
Apenas algumas reservas:
- Não verifique a adaptabilidade no navegador DevTools, os tamanhos dos lados na orientação paisagem do dispositivo não são calculados corretamente . É melhor verificar em um dispositivo real ou em um simulador (por exemplo, xCode Simulator).
- Use group-css-media-queries para combinar as mesmas consultas de mídia. Sem ele, é gerado um monte de código
@media ... repetido @media ... se, por conveniência, usamos o @include device() em cada seletor separadamente. Wrapper Gulp - gulp-group-css-media-queries .
Instalação
Faça o download da biblioteca:
$ yarn add sass-mediascreen $ npm install sass-mediascreen $ curl -O https://raw.githubusercontent.com/gvozdb/sass-mediascreen/master/_mediascreen.scss
E conecte os mixins à nossa aplicação:
@import "mediascreen";
Exemplos
É assim que você pode testar 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 }
Aqui estão os 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 }
E estes são mixins padrão para verificar o tamanho da tela (de, para) e a orientação atual do 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 suportados
Grupos- Móveis 320-767px -
mobile ,
mobile-portrait mobile-landscape- Tablets 768-1023px -
tablet ,
tablet-portrait ,
tablet-landscape- Laptops 1024-1199px -
laptop ,
laptop-portrait ,
laptop-landscape- Áreas de trabalho> = 1200 px -
desktop desktop-portrait desktop-landscapeTelefones- 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 -
iphonexsmaxComprimidos- 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 "-
ipadpro11Computadores portáteis- iPad Pro 12,9 "-
ipadpro12Infelizmente, em termos de tamanho da tela, o iPad Pro 12 é um laptop!Extensão da lista de dispositivos
Como eu disse anteriormente, você pode adicionar suporte para dispositivos personalizados ou grupos de dispositivos sem editar a fonte da biblioteca. Para fazer isso, antes de importar
@import "mediascreen" , você precisa declarar a variável
$ms-devices Sass com uma lista de seus 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";
Depois disso, você pode verificar seus dispositivos e os dispositivos de biblioteca padrão:
@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 }
Referências
Biblioteca no githubBiblioteca no Repositório NpmPágina de demonstração