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;。屏幕大小超过400px时，我希望显示图像（#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;
    }
}

这种方法令人遗憾地无效并导致以下问题：

当屏幕尺寸发生变化时，媒体查询不会插入图像。
在非常小的屏幕上，标题/菜单覆盖内容或页脚覆盖菜单。即使两者都设置为position:relative, display:block/inline等或在相同的z-index级别，也会发生这种情况。我试了几千次用不同的方法解决这个问题但没有成功。我只是不知道如何防止这种影响。
我必须在查询中使用!important才能使其正常工作，但不知道原因。我使用元素的id来防止任何优先级冲突，但这不起作用......

在下面的小提琴中，我使用了一个具有不透明度（而不是display:none;）的替代解决方案，以便让您了解它应该如何工作，但这不会解决菜单如果屏幕覆盖内容的问题变得非常小，这也意味着移动设备仍然加载图像。你可以在这里找到它：https://jsfiddle.net/9pj5ux3L/

显示无的初始方法存储在此链接下： https://jsfiddle.net/h56nx35g/2/

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

Answer 1

我会建议您采用“移动优先”的方法，从移动/小屏幕开始，然后按照平板电脑和桌面工作。相信我不会使开发复杂化，尤其是使用媒体查询： https://codemyviews.com/blog/mobilefirst

Answer 2

是的，首先编写移动设备可以让大多数人更轻松地设计响应式布局。你应该重新设计这个，或者，如果你喜欢这个设计并且想要提高你的开发技能，那么实现一些最小的javascript可能会有所帮助。有了它，您可以在某个断点处动态地将代码注入HTML中。

或者，如果您想让它尽可能简单，您只需将图片设置为标题div上的-d ' '即可。然后，使用媒体查询在指定的断点处设置background-image。

仅使用CSS很难从HTML中删除内容 - 这会损害性能（因为网站仍然需要加载和缓存内容）以及降低可访问性（background-image:none不会隐藏您的内容例如，来自屏幕阅读器的内容。将图像添加为背景元素，或者使用Javascript注入它们都可以解决这些问题。

P.S - 您绝对不应该在媒体查询中使用display: none;标签。

响应式图像和媒体查询

2 个答案: