移动设备的媒体查询在不同的移动设备中显示不同的对齐方式

Question

我有一个用 html 和 css 完成的网站，我在移动视图中使用了媒体查询，因为我网站中的一行显示错误对齐，所以 id 为移动设备执行了以下代码：

@media only screen and (max-width: 600px) {

#zayan {margin-left: -20%;}
#amir {margin-top: -20%; width: 100px;}
#amir h5 {font-size: 12px; margin-left: -40%;}


}

现在我在我的 redmi note 8 手机中检查了它，它显示完美，但是当我在我的 redmi 7 和另一个设备中检查它时，它出错了，

谁能告诉我这里有什么问题。提前致谢

Answer 1

我已经在我的设备上尝试过，希望对你有用

@media all and (max-width: 600px) {

    #zayan {margin: auto; }
    #amir h5 { font-size: 12px; }
    #amir { margin-top: -20%; }

    .card-body{ padding: 0px !important; }

}