lesscss印刷风格

时间:2011-12-16 02:15:23

标签: javascript css less

我想用lesscss进行打印, 但看起来,浏览器不会重新认识@media print

因为我不想嵌入

<link rel="stylesheet/css" type="text/css" href="themes/css/print.css" media="print">

进入页面。

任何人都可以帮助解决这个问题吗? lesscss sourse代码地址在这里

https://github.com

感谢

4 个答案:

答案 0 :(得分:6)

<link rel="stylesheet/less" href="http://worldMaps.org/maps/styles/growth.less" media="all">

重要的部分是 media =“all”,否则它将无法正确解析您链接的较少文件中的@media print {.no-print {display:none;}}。< / p>

答案 1 :(得分:1)

如果您的问题是如何为媒体打印嵌入较少样式:链接标记中的media属性对我有效。

<link rel="stylesheet/less" type="text/css" href="print.less" media="print">

media="print"是必不可少的,因为默认情况下,将编译样式插入为media="screen"

答案 2 :(得分:1)

当我使用.less时,用于显示打印样式的Web开发人员工具选项不能为我呈现。

我的解决方案,虽然可能无法100%正确渲染,具体取决于浏览器,但是要切换 @media print @media屏幕样式表中的属性,以便在页面加载时,呈现打印样式。

如果出现以下情况,我不建议使用此解决方案:

  • 您需要跟踪屏幕和打印样式
  • 您需要精确测量

如果符合以下条件,我建议使用此解决方案:

  • 您不希望每次都继续打印预览 调整
  • 您愿意牺牲以上内容来测试内容安排和样式结构

答案 3 :(得分:0)

如果您使用的是lesscss,请将@media属性用于“less”文件。

像这样:

@media: mobile;

.mixin (@a) when (@media = mobile) { ... }
.mixin (@a) when (@media = desktop) { ... }

并导入文件normaly:

<link rel="stylesheet/css" type="text/css" href="themes/css/print.less">

http://lesscss.org/#-pattern-matching-and-guard-expressions