Question

我想我到处都是，但没有成功。我正在学习Symfony2所以我有可能忽略了一些东西。

以下是我加载css的方法（工作正常）：

{% stylesheets filter='cssrewrite'
 '@MyHomeBundle/Resources/public/css/*.css'
 '@MyAuthBundle/Resources/public/css/*.css'
 '@MyUserBundle/Resources/public/css/*.css'
  <link rel="stylesheet" media="screen" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}

问题是我如何区分媒体：手持，打印，屏幕？

发现在旧的Symfony版本中，有文件view.yml，其中可以标记“mobile.css”将仅为小型设备加载等。到那时我发现讨论http://www.mail-archive.com/symfony-devs@googlegroups.com/msg07718.html是新的Symfony2中的方法要大得多，删除这个view.yml是很好的一步。然而，它让我无法解决我的问题。

所以问题是：我如何指定media =“掌上电脑”让我们说mobile.css或media =“print”打印版本，从我的捆绑包中提取？

我猜这可能是一些条件，在twig中测试名称，并且根据名称，例如home_mobile.css或home_print.css将相应地加载media =“handheld”或media =“print”，并且默认情况下media =“screen” - 但如果这是正确的方向以及如何实现它呢？

感谢您的帮助

Answer 1

我找不到官方答案，但使用两套样式表标签可以。

{% stylesheets filter='less,cssembed,cssrewrite,?yui_css' output='css/screen.css'
    'bundles/wolproject/css/main.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="all" />
{% endstylesheets %}

{% stylesheets filter='less,cssembed,cssrewrite,?yui_css' output='css/print.css'
    'bundles/wolproject/css/print.less'
%}
<link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="print" />
{% endstylesheets %}

Answer 2

不是一个真正的答案，而是另一种解决方案。

根据您网站的规模，我可能会将它们全部保存在一个CSS文件中，以加快页面加载时间，并对打印和设备进行媒体查询。然后，您可以将上面的代码更改为media =“all”。

相关链接 - http://css-tricks.com/one-two-three/

Symfony2设置css媒体类型（全部，打印，屏幕，手持）

2 个答案: