Sass MediaScreen-定义CSS设备

我相信最近不同设备组之间的屏幕尺寸差异变得越来越模糊。 尽管如此，我还是尝试编写一种工具来确定两组设备（手机，平板电脑，笔记本电脑，台式机）和特定设备（iPhone 5，iPhone X，iPad Pro 12等）。 在我看来，事实证明，这是一套相当方便的SASS mixins。 重要的是，该工具易于使用，并且还允许您在不编辑源代码的情况下将设备列表扩展为自己的设备。


顺便说一下， 在这里戳一下演示 。

只是几个保留：

• 不要在DevTools浏览器中检查适应性，那里的设备横向的侧面尺寸不能正确计算 。 最好在真实设备或模拟器（例如xCode Simulator）中进行检查。
• 使用group-css-media-queries组合相同的媒体查询。 没有它，就会产生很多重复的@media ...代码@media ...如果为了方便起见，我们在每个选择器中分别使用@include device() 。 Gulp包装器-gulp-group-css-media-queries 。

安装方式

下载库：

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

并将mixins连接到我们的应用程序：

 @import "mediascreen"; 

例子

这是测试特定设备的方法：

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

以下是设备组：

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

这些是用于检查屏幕尺寸（从，到）以及设备当前方向的标准混合器：

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

支持的设备列表

团体

-手机320-767像素- mobile ， mobile-portrait ， mobile-landscape
-平板电脑768-1023px- tablet ， tablet-portrait ， tablet-landscape
-笔记本电脑1024-1199px- laptop ， laptop-portrait ， laptop-landscape
-桌面> = 1200像素- desktop ， desktop-portrait ， desktop-landscape

手机

-iPhone iphone5s ，5c，SE- iphone5 ， iphone5s ， iphone5c ， iphonese
-iPhone iphone6 ， iphone6s - 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

平板电脑

-iPad 1，2，Mini，Air- ipad1 ， ipad2 ， ipadmini ， ipadair
-iPad 3、4，Pro 9.7“ ipadpro9 ， ipadpro9 ， ipadpro9
-iPad Pro 10.5“ ipadpro10
-iPad Pro 11.0“ ipadpro11

手提电脑

-iPad Pro 12.9英寸ipadpro12

screen，就屏幕尺寸而言，iPad Pro 12是一台笔记本电脑！

扩展设备列表

如前所述，您可以添加对自定义设备或设备组的支持，而无需编辑库源。 为此，在导入@import "mediascreen" ，您需要使用$ms-devices列表声明$ms-devices Sass变量：

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

之后，您可以检查您的设备以及标准库设备：

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

参考文献

github上的库
Npm存储库中的库
演示页面