LessCSS中的@media和@ font-face支持

Question

您好,有没有人知道如何使用LessCSS进行媒体查询？

  @media screen and (max-width: 600px) {
      #container{
          width: 480px;
      }
  }

给我以下错误:

! Syntax Error: on line 23: expected one of :: : . # * - [ @media @font-face , { ; got ( after:

@media screen and

同样,@ font-face和任何与LessCSS编译器冲突的CSS3查询.

谢谢!

Answer 1

以上所有答案都已过时.

less.js和lessCss/dotless都支持@media和@ font-face.

他们现在也使用嵌套规则支持@media,例如

.cl {
 @media screen and (max-width: 600px) {
  .d {
   .e {
     background: none;
   }
  }
 }
}

变

@media screen and (max-width: 600px) {
 .cl .d .e {
   background: none;
 }
}

有关更多信息,请参阅less.js文档和无点文档.

Answer 2

据我所知,LessCSS不支持@media,你可以在他们的github主页上找到开放票.

我认为在你的情况下工作的唯一方法是:

<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css" />

从接受的答案开始,看起来问题已经在LessCSS版本中得到修复.