@viewport、@media 和 LESS答案

【问题标题】：@viewport, @media and LESS@viewport、@media 和 LESS
【发布时间】：2013-07-15 23:51:47
【问题描述】：

我最近将一些 CSS 转换为 LESS 以用于 .NET 应用程序（我正在使用 .NET 的 dotless，http://www.dotlesscss.org/ 在运行时编译 LESS）。

编译器落在这两个代码块上：

@viewport {
  width: device-width;
}
/* Add a min-width for IE 8 and lower */
@media \0screen\,screen\9 {
    body {
        min-width: 960px;
    }
}

仅供参考，上面的媒体查询是一种针对 IE 的 hacky 方式

如何“减少”这些代码块？

【问题讨论】：

标签： css less media-queries viewport

【解决方案1】：

在 Less >= 1.4.0 中，您可以简单地定义一个变量并在媒体查询中使用它：

@iehack: \0screen\,screen\9;

@media @iehack {
    body {
        min-width: 960px;
    }
}

在旧版本的 LESS (

@iehack: ~'\0screen\,screen\9';

这应该会给你想要的输出。

但是，如果您想在 CSS 中采用 hacky 方式，您也可以在 LESS 中采用 hacky 方式：

@themedia: ~"@media \0screen\,screen\9 {";
@aftermedia: ~"} after";
@{themedia} {
    body {
        min-width: 960px;
    }
}
@{aftermedia}{/*just to add the closing bracket to media*/}

你在一个普通角色周围注入媒体查询，这会在媒体块的末尾生成一个额外的选择器，但你也可以将它用于有用的东西，这种技术可能用于more exciting instances而不是媒体查询...但我只是想提一下。

在这种情况下，CSS 输出如下所示：

@media \0screen\,screen\9 { 
body {
  min-width: 960px;
}
}
after {
  /*just to add the closing bracket to media*/
}

【讨论】：

非常有用！谢谢:)