响应式网页设计 - 添加正确的媒体查询答案

【问题标题】：Responsive web design - add correct media queries响应式网页设计 - 添加正确的媒体查询
【发布时间】：2018-04-18 20:00:06
【问题描述】：

我用 wordpress 开发了一个网站，它的设计适用于台式机和平板电脑，但是当涉及到手机的可视化时，我在设置一个好的设计时遇到了问题。我正在尝试添加媒体查询，但无法根据需要控制元素。具体来说（我正在用Iphone5测试它）：导航栏在垂直视图中没有覆盖全屏，图像没有居中，文本的边距是错误的...... 这是主页的 HTML 示例：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=content-width, initial-scale=1.0">
<style>
  #logo {
    display: none;
  }

  div img {
    display: inline;
  }

  div footer-area {
    display: none;
  }

@media only screen and (max-width: 320px) {
    img {
      float: center;
  }

  div p {
    margin: 0;
    padding: 15px;
    width: 100%;
  }
}
</style>

<img style="margin: -76px auto -55px auto; max-width: 450px;" src="http://localhost/wp/wp-content/uploads/2017/09/logo.png" alt="" width="1800" height="903" class="aligncenter size-full wp-image-461" />
</head>
<body>
<div>[smartslider3 slider=4]</div>
<p style=" margin:70px 160px 0 160px;"><strong>Dottore Commercialista e Revisore Legale con sede a Verona</strong>, Alberto Nesso offre ai propri clienti una vasta gamma di prestazioni professionali di livello qualitativamente elevato entro un prezzo medio di mercato. L'attività di consulenza ordinaria contabile e fiscale, integrata all'occorrenza da servizi di assistenza amministrativa e aziendale-societaria, si rivolge ad imprese individuali, società di persone e capitali, enti no profit. Prestando attenzione alle esigenze di ciascun cliente, vengono fornite le informazioni specifiche, per massimizzare i risultati e le risoluzioni dei problemi, nella massima trasparenza e attraverso procedure giuridiche e fiscali coerenti con la strategia aziendale.</p>
<div style="margin: 30px 50px; " align="center"><a href="http://www.albertonesso.it/profilo/" target="_blank"><img style="padding-right: 10px; width: 240px;" src="http://www.albertonesso.it/wp-content/uploads/2017/09/HOME-profilo2.png" /></a><a href="http://www.albertonesso.it/competenze/" target="_blank"><img style="padding-right: 5px; padding-left: 5px; width: 240px;" src="http://www.albertonesso.it/wp-content/uploads/2017/09/HOME-competenze2.png" /></a><a href="http://www.albertonesso.it/contatti/"target="_blank"><img style="padding-left: 10px; width: 240px;" src="http://www.albertonesso.it/wp-content/uploads/2017/09/HOME-contatti2.png" /></a></div>
</body>
</html>

这里是网址：https://www.albertonesso.it

您能帮我解决这个问题吗？提前致谢！

【问题讨论】：

标签： wordpress responsive-design responsive

【解决方案1】：

在 Chrome 中，您在主页上的问题似乎是导航消失在您的分享栏后面。对我来说，在浏览器中，这段代码修复了它：

@media (max-width: 960px) {
   .site-navigation-inner {
      margin-top: 40px;
    }
}

不幸的是，某些 javascript 会在内容文本上设置边距，以便在手机上查看时创建过窄的文本列。

如果可能，我建议您删除该 javascript 并在 css 中设置边距。如果您无法删除 js，则可以使用以下内容覆盖它：

@media (max-width: 768px) {
   .entry-content p {
      margin: 0 40px !important;
    }
}

对于图片，您可以添加：

   img.size-full {
      width: 100%;
    }

或者，如果这会以不良方式影响其他图像：

   img.wp-image-461 {
      width: 100%;
    }

将仅定位当前徽标图像。

【讨论】：

感谢您的提示。这个导航栏问题也为我解决了。对文字和图片有什么建议吗？
当然...除了我添加的边距修复之外，我真的没有看到任何其他问题。您希望图像如何不同？另外，我更改了第一个媒体查询的宽度。
酷，谢谢你的代码。有一个标志图像显示不正常，当屏幕垂直且小于 590px 时，它会在右侧的屏幕上方...你从手机上看到它吗？
我尝试了两种图像解决方案，在家中工作正常，但我仍然在其他页面中看到一堆图像......
我只能接受它，因为我是新人，我没有足够的声望点来投票和聊天。获得许可后我会这样做