响应式图片和媒体查询

Question

我正在我的第一个真实网站上工作，并在媒体查询和定位上挣扎。我想创建一个包含大图像和菜单的顶部着陆页的单页设计。对于较小的屏幕，我想隐藏这个大图像并只显示菜单。

所以我的计划是建立一个移动版本，而不应该通过媒体查询扩展图像。在我的HTML我创建了一个相对定位的div包括图像和标题相对定位的div和导航：

<div class="relative"> 
    <img id="landingimg" class="bigimg" src="http://placekitten.com/g/1200/800"> 
    <div id="header"> 
     <h1 class="center headline">HEADLINE</h1> 
     <nav> 
      <a class="navigation" href="">Link</a> 
      <a class="navigation" href="">Link</a> 
      <a class="navigation" href="">Link</a> 
      <a class="navigation" href="">Link</a> 
     </nav> 
    </div> 
</div> 

图像设置为display:none;。拥有超过400像素的屏幕大小我想显示的图像（#landingimg），并通过此查询重新定位容器内的导航DIV（#header）：

@media screen and (min-width: 470px) { 

    .headline { 
     font-size: 200% !important; 
    } 

    #landingimg { 
     display: inline !important; 
    } 

    #header { 
     position: absolute !important; 
     top: 30% !important; 
    } 
} 

这种做法令人遗憾的是没有工作，导致以下问题：

1. 当屏幕大小更改时，媒体查询不会插入图像。
2. 在非常小的屏幕上，标题/菜单覆盖内容或页脚覆盖菜单。即使两者都设置为position:relative, display:block/inline等，或者在相同的Z指数级别上，也会发生这种情况。我尝试了千次以不同的方法解决这个问题，但没有成功。我只是不知道如何防止这种影响。
3. 我不得不在我的查询中使用!important才能正常工作，但不知道为什么。我与元素的ID工作，以防止任何优先权冲突，但还是不行...

下面拨弄我用不透明度（而不是display:none;）的替代解决方案的形象，给你一个想法它应该如何工作，但这不解决菜单覆盖内容的问题，如果屏幕变得非常小，并且这也意味着移动设备仍然加载图像。 您可以找到它：https://jsfiddle.net/9pj5ux3L/

与显示器没有最初的方法存储在此链接下： https://jsfiddle.net/h56nx35g/2/

希望有人能告诉我一个更专业的解决方案。谢谢！

Answer 1

我会建议你采用“移动第一”的方法，从移动/小屏幕开始，然后工作到平板电脑和桌面。请相信我，它不会让开发复杂化，尤其是与媒体查询相关： https://codemyviews.com/blog/mobilefirst

Answer 2

是的，编码移动首先使得设计响应式布局对大多数人来说更容易。考虑到这一点，你应该重新设计，或者，如果你喜欢这个设计，并且想要升级你的开发者技能，那么实现一些最小化的javascript会有帮助。有了它，您可以在某个断点处动态地将代码注入到HTML中。

另外，如果你想保持它尽可能简单，你可以将您的图像设置为background-image在您的标题div。然后，使用媒体查询在指定的断点处设置background-image:none。

只用CSS就很难从HTML中删除内容 - 它会损害性能（因为该网站仍然需要加载和缓存内容）并且减少了可访问性（display: none;不会隐藏屏幕阅读器中的内容，例如）。将图像添加为背景元素或使用Javascript注入图像都可以解决这些问题。

P.S - 您绝对不应该在您的媒体查询中需要!important标签。