Question

我开发了一个带有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

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

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

仅定位当前徽标图片。

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

1 个答案: