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

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; }

}