Sass MediaScreen - Defining CSS Devices

I believe that recently the difference in screen size between different groups of devices is becoming more blurred. Despite this, I tried to write a tool to determine both groups of devices (mobile phones, tablets, laptops, desktops) and specific devices (iPhone 5, iPhone X, iPad Pro 12, etc.). It turned out, in my opinion, a rather convenient pack of SASS mixins. And importantly, the tool is easy to use, and also allows you to expand your device list without editing the source.





By the way, poke the demo here .

Just a couple of reservations:

• Do not test the adaptability in the DevTools browser, the sizes of the sides in the landscape orientation of the device are not calculated there correctly . It is better to check on a real device or in a simulator (for example, xCode Simulator).
• Use group-css-media-queries to combine the same media queries. Without it, a lot of repeating @media ...
  
  
  
  code is generated @media ...
  
  
  
  if for the sake of convenience we use the @include device()
  
  
  
  in each selector separately. Gulp wrapper - gulp-group-css-media-queries .

Installation

Download the library:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

And connect the mixins to our application:

 @import "mediascreen";
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Examples

This is how you can test specific devices:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Here are the device groups:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

And these are standard mixins for checking screen sizes (from, to) and the current orientation of the device:

 @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() {/*...*/}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

List of supported devices

Groups



- Mobile phones 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-landscape







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







Tablets



- 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







Laptops



- iPad Pro 12.9 "- ipadpro12







Alas, in terms of screen size, the iPad Pro 12 is a laptop!

Extension of the list of devices

As I said earlier, you can add support for custom devices or device groups without editing the library source. To do this, before importing @import "mediascreen"



, you need to declare the $ms-devices



Sass variable with a list of your devices:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

After that, you can check your devices as well as standard library devices:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

References

GitHub library

Library in the Npm Repository

Demo page