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

时间:2018-06-21 09:47:11

标签: jquery html css wordpress media-queries

我已经使用媒体查询来设计网站的某些部分。例如,我已经为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分辨率)上的屏幕截图: enter image description here

下面是25英寸(1920宽分辨率,这就是它的外观)上的屏幕截图:

enter image description here

谢谢!

3 个答案:

答案 0 :(得分:1)

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

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

p{
    text-align:right;
}

答案 1 :(得分:1)

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

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

答案 2 :(得分:1)

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

尝试像这样设置CSS:

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

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