CSS 媒体查询技巧

Question

我正在编写一个使用媒体查询来处理移动版本的网站。是否可以让主css文件输出这个

<div class="classname">
  Item 1<br />
  Item 2<br />
  Item 3<br />
  etc
</div>

然后在手机的css文件中输出这个：

<div class="classname">
  Item 1&nbsp;&nbsp;
  Item 2&nbsp;&nbsp;
  Item 3&nbsp;&nbsp;
  etc
</div>

还可以通过媒体查询隐藏文本吗？

Answer 1

不完全是，不。但是你可以有一个 ul 和 li s 是 display: block （对于前一个例子）或 display: inline （对于后者）。

<ul class="classname">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
 </ul>

 case 1:
 ul.classname li { display: block }

 case 2:
 ul.classname li { display: inline; padding-right: 24px } 

Answer 2

您可以简单地在您的 iphone 样式表中设置 br {display:none}，也可以使用 ::after 添加信息，但我不确定您是否可以在 content 的 ::after 部分中放置不间断空格声明。

除此之外，如果你隐藏了br 标签，你就没有钩子可以在后面添加一些东西了。

我建议先使用语义非 br html，这会使一切变得容易得多。

Answer 3

您编写它的方式是不可能的：CSS 不会重写您的 HTML，它只是改变文档的表现方面。最好的方法是编写“语义”HTML，即包含文档结构但不包含布局的 HTML，然后使用 CSS 定义布局方式。

在您的示例中，您可能希望div 包含项目列表，因此合乎逻辑的做法是使用<ul> 而不是<div>，并使用<li> 而不是单个文本项目，例如：

<ul class="classname">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

有了这样的标记，您可以使用 CSS 来设置列表样式。对于桌面浏览器，您可能希望垂直显示项目：

ul.classname {
    /* First, override browser defaults: */
    list-style: none;
    padding: 0;
    margin: 0;
    text-indent: 0;
}

ul.li {
    display: block;
    padding: 0;
    margin: 0;
    text-indent: 0;
}

对于移动浏览器，您可能希望它们彼此相邻，并在它们之间添加一点间距：

ul.li {
    display: inline;
    margin-right: 2em;
}

要完全隐藏元素，请使用标准 CSS 技术，即display: none。