媒体查询在不同尺寸的屏幕上效果不佳

Question

我已经使用媒体查询来设计网站的某些部分。例如，我已经为1920 px宽的屏幕分辨率设置了某些设置，但是在我的15英寸笔记本电脑和25英寸台式机屏幕上它们看起来有所不同。他们看起来很不一样。 我怎样才能使它们看起来几乎一样？

@media (min-width: 1920px) {
  #bluetitle {
    padding-right: 357px;
  }
}

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) {
  #bluetitle {
    padding-right: 235px;
  }
}

@media screen and (min-device-width: 1601px) and (max-device-width: 1919px) {
  #bluetitle {
    padding-right: 310px;
  }
}

<h5 class="elementor-heading-title elementor-size-default">
  <p dir="rtl"><span id="bluetitle">Title<font color="#dff2f6">.</font></span><span style="font-family: Heebo, sans-serif; font-size: 1.938em; font-weight: 600;"></span></p>
</h5>

这是网站：mayabarber.co.il

以下是15英寸（1920分辨率）上的屏幕截图：

下面是25英寸（1920宽分辨率，这就是它的外观）上的屏幕截图：

谢谢！

Answer 1

在这种情况下，我认为您不需要媒体查询！ 只需在标题容器上设置：text-align：就可以了，如果需要，可以在标题上保留填充。

#bluetitle{
    padding-right:...px;
}

p{
    text-align:right;
}

Answer 2

您是否尝试通过将此元标记添加到html文档中来进行尝试？ 并尝试为paddings / margings提供％值

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 3

我刚刚在您的网站上使用Inspect element测试了此CSS，看来还可以。

尝试像这样设置CSS：

#bluetitle {
    background-color: #dff2f6;
    padding-right: 1%; /* You can edit this as per your needs */
}

IMO，您不需要@media查询，因为在测试中，没有@media查询，您的网站就很好了。