我希望文本仅在移动设备上居中对齐。在桌面上,文本应该右对齐。
@media only screen and (min-device-width: 320px) and (max-device-width: 800px) {
.centerMobileOnly {
text-align: center !important;
}
}
@media only screen and (min-device-width: 600px) {
.rightDesktopOnly {
text-align: right !important;
}
}
<div>
<h3 class="rightDesktopOnly centerMobileOnly">02:00</h3>
</div>
最佳答案
你不必为媒体css添加两个类,你只需要通过一个。
.centerMobileOnly{
text-align: right;
}
@media (max-device-width: 800px) {
.centerMobileOnly {
text-align: center;
}
}
<div>
<h3 class="centerMobileOnly">02:00</h3>
</div>