Question

我正在制作一个网站，当分辨率达到640px或更低时，文字会变为图标。我想知道是否有一种方法可以使用CSS实现它，或者这是否更复杂，应该使用JQuery或类似的东西？

以下是我想要做的直观表达：

任何帮助都将受到高度赞赏，最好的解决方案将获得答案。

<div>
    <nav>
        <ul>
            <li><a><img src="images/LOGO.svg" height="44px" alt="Sandwich Express"/></a></li>
            <li><a href="index.html">Home<a></li>
            <li><a href="whatwedo.html">What We Do<a></li>
            <li><a href="oursandwiches">Our Sandwiches<a></li>
            <li><a href="contactus">Contact Us<a></li>
        </ul>
    </nav>
</div>

这是我要更改的横幅的HTML，与之配对的CSS是：

nav ul li a

{

display:block;
margin-left: -40px;
font-size:20px;
line-height:44px;
font-family: "Josefin Sans";  
text-align:center;
text-decoration:none;
color:white;
padding: 0 20px 0 20px;
background-color: black;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;

}

    nav ul li a:hover   

    { 
    color:CFCFCF; 
    }

我要发布任何其他代码。

Answer 1

试试这样：

HTML

<div>
    <span class="text">text</span>
    <span class="icon"><img src="" /></span>
</div>

CSS

@media (min-width: 641px) {
    span.icon {display:none}
    span.text {display:inline-block}
}

@media (max-width: 640px) {
    span.icon {display:inline-block}
    span.text {display:none}
}

编辑（CODEPEN示例）

看一下这个工作示例CodePen

Answer 2

使用诸如Bootstrap之类的框架将帮助您快速完成此任务，尽管概念与简单的css相同。制作两个菜单（主菜单和响应式菜单）并隐藏一个。然后以特定宽度切换隐藏类。关于Bootstrap的好处是，JQuery已经通过简单地使用类hidden-xs hidden-sm hidden-md hidden-lg

编写了

请参阅 DEMO

Answer 3

我会在640px上使用媒体查询并更改链接的背景图像。如果你没有看到你的HTML，我就无法给出确切的答案，但是如果你在里面使用带有导航功能的导航系统，那就简单了：

@media only screen and (max-width: 640px) {
    nav a {
        background: url('path/to/image.jpg') no-repeat center center;
        height: 100px;                        /* be sure to set height & width */
        width:  600px;

        /* Hide the text. */
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
    }
}

Answer 4

是，您可以使用纯CSS实现此功能。只需使用两个媒体查询：

使文字显示并隐藏图标的文件
另一个用于反向

考虑这个典型而简单的例子：

@media (max-width: 640px) {
    /*applied if browser window width is less than or equal to 600px*/
    .text {
        display: none;
    }
}

@media (min-width: 641px) {
    /*applied if browser window width is greater than 600px*/
    .icons {
        display: none;
    }
}

如果你在这些元素的初始样式声明之后放置它们，它们将在满足上述条件时优雅地覆盖它们，而不需要在以前的CSS中更改任何内容。如果您希望在样式表的前面包含这些查询，可以使用!important关键字。

满足媒体查询时将文本更改为图标

4 个答案: