/******************************** 通用媒介查询样式,适配样式 **********************/
/* 大屏幕(wed端) */
@media (min-width: 768px) {
/* web端显示为block */
.web-show {
display: block !important;
}
/* web端显示为flex */
.web-show-flex {
display: flex !important;
}
/* web端显示为inline */
.web-show-inline {
display: inline !important;
}
/* web端显示为inline-block */
.web-show-inline-block {
display: inline-block !important;
}
/* 手机端隐藏 */
.phone-show,
.phone-show-flex,
.phone-show-inline,
.phone-show-inline-block {
display: none !important;
}
}
/* 小屏幕(手机端) */
@media screen and (max-width: 767px) {
/* phone端显示为block */
.phone-show {
display: block !important;
}
/* phone端显示为flex */
.phone-show-flex {
display: flex !important;
}
/* phone端显示为inline */
.phone-show-inline {
display: inline !important;
}
/* phone端显示为inline-block */
.phone-show-inline-block {
display: inline-block !important;
}
/* web端隐藏 */
.web-show,
.web-show-flex,
.web-show-inline,
.web-show-inline-block {
display: none !important;
}
/* phone端显示列 */
.phone-flex-column {
flex-direction: column;
align-items: flex-start;
}
}
@media 通用媒介查询适配样式
最新推荐文章于 2024-09-30 15:42:36 发布