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

Posted 2023-03-06

【中文标题】媒体查询在不同尺寸的屏幕上效果不佳

【英文标题】：Media queries don't work well on different size screens

【发布时间】：2018-11-30 14:30:59

【问题描述】：

我使用媒体查询来设计我网站中的一些部分。例如，我为 1920 像素宽度的屏幕分辨率设置了某些设置，但它们在我的 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 宽度分辨率 - 这就是它应该看起来的样子）：

谢谢！

【问题讨论】：

我的建议是在定义padding-right 时使用百分比。这将使不同屏幕尺寸的一致性更高。

我同意@HamzaAhmad 使用百分比

px 是一个相对单位。 24 英寸屏幕中的 1 像素与 15 英寸屏幕中的 1 像素不同。使用百分比代替以保持一致性。

由于某种原因，当我添加百分比单位时，什么也没发生。

【参考方案1】：

我刚刚在您的网站上使用Inspect element 测试了这个 CSS，它似乎没问题。

尝试像这样设置你的 CSS：

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

IMO，您不需要 @media 查询，因为在测试中，您的网站在没有 @media 查询的情况下看起来还不错。

【讨论】：

我只是添加了，什么也没发生，我什至添加了！重要

@media (min-width: 1920px) #bluetitle padding-right: 40% !important; 我需要媒体查询，因为在不同的屏幕分辨率上它看起来不同。

@RoziBuber 您是否尝试在没有媒体查询的情况下进行设置？定义padding-right百分比意味着无论屏幕尺寸如何，它都会与右侧保持相同的距离

【参考方案2】：

您是否尝试将此元标记添加到 html 文档？ 并尝试为填充/边距提供 % 值

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

【参考方案3】：

我认为在这种情况下您不需要媒体查询！ 只需在标题容器上设置 : text-align: right 并在标题上保留填充即可。

#bluetitle
    padding-right:...px;


p
    text-align:right;

【讨论】：

但我仍然希望它在不同的分辨率下看起来不错，而不仅仅是 1920px 宽度