如果您主要在后端工作，则可能会发现与我相同的问题：WTF是媒体查询中的所有最小宽度，最大宽度的说明。平板电脑或任何其他移动设备是多少像素？
由于这些原因，我制作了一个简单的混合物，可以帮助您创建媒体查询。
第一件事首先
如果您已经太无聊了，直到结尾，您可以尝试从GitHub O NPM
下载它https://github.com/maiobarbero/device_media_query
npm i device_media_query
怎么运行的
库提供了一种称为设备的混合蛋白，该设备接收逻辑运算符和对应于屏幕宽度的值。您可以使用>，>，> =，<和<=与预定义的设备变量或自定义值相结合的操作员创建复杂的媒体查询。
这些是设定的变量，您可以在项目中导入库
之前可以覆盖。
$phone: 480px;
$phone-landscape: 812px;
$tablet: 1024px;
$tablet-landscape: 1366px;
$desktop: 1920px;
$laptop: 1920px;
$screen-4k: 3840px;
您可以将以下逻辑运算符与设备混合使用：
-
>：大于 -
>=：大于或等于 -
<：少于 -
<=：小于或等于
示例用法
这是如何使用设备Mixin的一个示例：
@include device('>', $tablet, '<=', $desktop) {
.my-class {
font-size: 18px;
}
}
这将生成一个媒体查询，该查询将指定样式应用于大于$电话的屏幕，小于或等于$平板电脑。渲染的CSS看起来像：
@media (min-width: 1025px) and (max-width: 1920px) {
.my-class {
font-size: 18px;
}
}
快乐的编码