响应式网页设计 - 添加正确的媒体查询
Posted
技术标签:
【中文标题】响应式网页设计 - 添加正确的媒体查询【英文标题】：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" 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
您能帮我解决这个问题吗？ 提前致谢！
【问题讨论】：
【参考方案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 时，它会在右侧的屏幕上方...你从手机上看到它吗？ 我尝试了两种图像解决方案，在家中工作正常，但我仍然在其他页面中看到一堆图像...... 我只能接受它，因为我是新人，我没有足够的声望点来投票和聊天。获得许可后我会这样做以上是关于响应式网页设计 - 添加正确的媒体查询的主要内容，如果未能解决你的问题，请参考以下文章