Saya percaya bahwa baru-baru ini perbedaan ukuran layar antara berbagai kelompok perangkat menjadi lebih kabur. Meskipun demikian, saya mencoba menulis alat untuk menentukan kedua kelompok perangkat (ponsel, tablet, laptop, desktop) dan perangkat tertentu (iPhone 5, iPhone X, iPad Pro 12, dll.). Ternyata, menurut pendapat saya, paket mixin SASS agak nyaman. Dan yang terpenting, alat ini mudah digunakan, dan juga memungkinkan Anda untuk memperluas daftar perangkat ke perangkat Anda sendiri tanpa mengedit sumbernya.
Omong-omong,
aduk demo di sini .
Hanya beberapa reservasi:
- Jangan periksa kemampuan adaptasi di browser DevTools, ukuran sisi-sisi dalam orientasi lanskap perangkat tidak dihitung dengan benar di sana. Lebih baik memeriksa perangkat nyata atau dalam simulator (misalnya, xCode Simulator).
- Gunakan grup-css-media-queries untuk menggabungkan permintaan media yang sama. Tanpa itu, banyak kode
@media ... berulang dihasilkan @media ... jika demi kenyamanan kami menggunakan @include device() di setiap pemilih secara terpisah. Gulp wrapper - gulp-group-css-media-queries .
Instalasi
Unduh perpustakaan:
$ yarn add sass-mediascreen $ npm install sass-mediascreen $ curl -O https://raw.githubusercontent.com/gvozdb/sass-mediascreen/master/_mediascreen.scss
Dan hubungkan mixin ke aplikasi kita:
@import "mediascreen";
Contohnya
Ini adalah cara Anda dapat menguji perangkat tertentu:
@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 }
Berikut adalah grup perangkat:
@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 }
Dan ini adalah mixin standar untuk memeriksa ukuran layar (dari, ke) dan orientasi perangkat saat ini:
@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() {/*...*/}
Daftar perangkat yang didukung
Grup- Mobiles 320-767px -
mobile ,
mobile-portrait ,
mobile-landscape- Tablet 768-1023px -
tablet ,
tablet-portrait ,
tablet-landscape- Laptop 1024-1199px -
laptop ,
laptop-portrait ,
laptop-landscape- Desktops = = 1200px -
desktop ,
desktop-portrait ,
desktop-landscapeTelepon- 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 -
iphonexsmaxTablet- 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 "-
ipadpro11Laptop- iPad Pro 12.9 "-
ipadpro12Sayangnya, dalam hal ukuran layar, iPad Pro 12 adalah laptop!Perpanjangan daftar perangkat
Seperti yang saya katakan sebelumnya, Anda dapat menambahkan dukungan untuk perangkat khusus atau grup perangkat tanpa mengedit sumber pustaka. Untuk melakukan ini, sebelum mengimpor
@import "mediascreen" , Anda perlu mendeklarasikan variabel
$ms-devices Sass dengan daftar perangkat Anda:
$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";
Setelah itu, Anda dapat memeriksa perangkat Anda serta perangkat perpustakaan standar:
@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 }
Referensi
Perpustakaan di githubPerpustakaan di Repositori NpmHalaman demo