@ viewport，@ media和LESS [英] @viewport, @media and LESS

问题描述

我最近将一些CSS转换为LESS以用于.NET应用程序(我在.NET中使用无点， http://www.dotlesscss.org/以便在运行时编译LESS).

I've recently converted some CSS to LESS for use with a .NET application (I am using dotless for .NET, http://www.dotlesscss.org/ to compile the LESS at runtime).

编译器会陷入以下两个代码块:

The compiler is falling down on these two blocks of code:

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

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

Just for your reference, the media query above is a hacky way of targeting IE

如何简化"这些代码块?

How can I "LESS-ify" these blocks of code?

推荐答案

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

In Less >= 1.4.0 you can simply define a variable and use it in the media query:

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

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

在LESS的旧版本(< = 1.3.3)中，您可能希望在变量中使用字符串内插:

In older versions of LESS (<=1.3.3) you might want to use string string interpolation in the variable:

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

这应该为您提供所需的输出.

This should give you your desired output.

但是，如果您想在CSS中采用骇人听闻的方式，那么也可以在LESS中采用一种骇人听闻的方式:

But if you want to go a hacky way in CSS you can as well go a hacky way in LESS too:

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

在正常角色周围注入媒体查询的地方，这会在媒体块的末尾生成一个额外的选择器，但是您也可以将其用于一些有用的东西，该技术可能在

where you inject the media query around a normal role, this generates an extra selector at the end of the media block, but you can use it for something useful as well, this technique might be used in more exciting instances than media queries ... but I just wanted to mention it.

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

In this case the CSS output would look like:

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

这篇关于@ viewport，@ media和LESS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！