CSS Media Query桌面，平板电脑和移动效率

Question

我正在制作允许以下内容的媒体查询中的单个类：

• 仅在台式机上显示
• 仅在平板电脑上显示
• 仅在移动设备上显示
• 仅在台式机和平板电脑上显示
• 仅在平板电脑和移动设备上显示
• 仅在台式机和移动设备上显示

我已经开始工作了。我只是想看看是否有一种更简单，更有效的方法？

@charset "utf-8";
/* CSS Document */

/* Hide Tablet and Mobile */
.desktop-only {display: block;}     /* use this class to only DISPLAY content only on DESKTOP */

.tablet-only {display: none;}       /*use this class to only DISPLAY content only on TABLET */

.mobile-only {display: none;}           /*use this class to only DISPLAY content only on MOBLIE */

.hide-tablet{display: block}                    /*Use this class to HIDE content only on TABLET /*

/* Hide Desktop and Mobile */
@media screen and (max-width: 1120px) {

.desktop-only {display: none;}
.tablet-only {display: block;} 
.mobile-only {display: none;}
.hide-tablet{display:none;}

}

/* Hide from Desktop and Tablet */
@media screen and (max-width: 767px) {

.desktop-only {display: none;}
.tablet-only {display: none;}
.mobile-only {display: block;} 
.hide-tablet{display:block;}
.hide-mobile {display: none;} /* use this class to only DISPLAY content on DESKTOP and TABLET */
}

/* Shows Tablet and Mobile */
@media screen and (min-width: 1120px) {

.hide-desktop {display: none;} /* use this class to only DISPLAY content on TABLET and MOBILE */

}