0

我正在使用ZURB Foundation框架进行响应式布局。

我在导航栏上的文本旁边添加了一些图标（图标字体跨度），这就是我想要发生的事情：

当视口不够宽以在一行上显示所有导航项时，应隐藏仅将级联到下一行的项的文本标签，并且该项的字体大小（图标大小）应增加到一个新的固定值。

我附上了 3 张图片（我刚刚被 chrome 检查员欺骗）来展示我在寻找什么。

如果没有 JavaScript，这可能吗？如果是这样，怎么做？

全屏

开窗的

移动的

4

4 回答 4

3

所以...

这是 W3C 建议的隐藏部分链接文本的解决方案：

height: 1px;
width: 1px;
position: absolute;
overflow: hidden;
top: -10px;

假设您要使用以下 HTML 代码：

<li><a href="#">Documentation</a></li>

如果您想要（例如）30px => 50px 转换，这是一个解决方案：

li {
  padding-left : 30px;
  line-height  : 30px; /* vertical align */
  background   : transparent url(http://placehold.it/30) no-repeat scroll 0 0;
}

/* Put whatever you want as a size here */
@media (max-width: 600px) { 
  li {

    background : transparent url(http://placehold.it/50) no-repeat scroll 0 0;
    width      : 50px;
    height     : 50px;
  }
  a {
    height   : 1px;
    width    : 1px;
    position : absolute;
    overflow : hidden;
    top      : -1000px; 
  }
}

此解决方案强制您为图像创建 2 个版本。但实际上不建议调整图像大小，因此处理一张图像的 2 个版本并不是一个坏主意。

在您的特定情况下，如果您使用字体图标，您可能会使用这种 HTML 代码：

<li>
  <a href="#">
    <span class="icon">X</span>
    <span class="text">Documentation</span>
  </a>
</li>

所以你可以这样调整 CSS 代码：

span {
  font-size : medium;
}

@media (max-width: 600px) { 
  span.icon {
    font-size : x-large;
  }
  span.text {
    height   : 1px;
    width    : 1px;
    position : absolute;
    overflow : hidden;
    top      : -1000px; 
  }
}
于 2012-12-14T00:02:52.720 回答
1

试试这样的东西？

CSS：

@media (max-width: 320px) 
.noshow {
display: none;
}

在您的 HTML 标记中，将“noshow”类应用于您要隐藏的文本。

于 2012-12-13T23:46:27.577 回答
1

我通过迭代Charles-Edouard Coste的答案找到了解决方案。我正在使用Sass，但我将首先显示它的 CSS 输出：

nav .nav-bar .icon {
  font-size: 24px;
  padding-right: 4px;
}

@media only screen and (max-width: 700px) {
  nav .nav-bar li:nth-child(1) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  nav .nav-bar li:nth-child(2) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 900px) {
  nav .nav-bar li:nth-child(3) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 1000px) {
  nav .nav-bar li:nth-child(4) .icon-label {
    display: none;
  }
}
@media only screen and (max-width: 1100px) {
  nav .nav-bar li:nth-child(5) .icon-label {
    display: none;
  }
}

该解决方案可以在每减少一百像素时隐藏一个标签。不幸的是，它要求列表中的每个元素都有一个新规则，因此它要求样式表要么

  1. 准确了解列表长度，或
  2. 包括可能未使用的指令，直到合理的最大长度。

我选择创建一个Sass mixin以供重用并使源代码不那么冗长。

@mixin iconlist( $min-width, $label-selector, $step: 100px, $count: 5 )
  //
   The iconlist() mixin will responsively hide labels, 
   starting from the last, as the viewport width is decreased.

   This can be included in a horizontal list to show only icons
   on small screens, while still displaying as many labels as
   possible, assuming items are prioritized from most important
   to least.

  @for $i from 1 through $count
    $max-width: $min-width + ( $step * $i )
    @media only screen and (max-width: #{$max-width})
      li:nth-child(#{$i})
        #{$label-selector}
          display: none

用法

.nav-bar
  // Responsively hide 0-3 labels from the end of the list.
  @include iconlist(600px, '.icon-label', 100px, 3)

如果有人愿意建议一个重构来产生更小或更好解耦的 CSS，那就太棒了！但我不确定它会如何完成。

于 2012-12-14T03:00:02.393 回答
-1

根据您的喜好和需要进行编辑。

@media only screen and (max-device-width: 480px) { 

  html {
    -webkit-text-size-adjust: none;
  }

  .tooBig {
    display: none;
  }

}
于 2012-12-13T23:46:09.340 回答