css - LESS 将 CSS 文件限制在某些视口(viewport)(Shopware)

Question

我今天在使用 Shopware 时遇到了问题。我想限制某些 CSS 文件(移动 css 和桌面 css)的使用。

问题是:两个文件都在使用，而且似乎不允许我将文件限制在视口(viewport)中。我做错了什么？

如果你能在这里帮助我，那就太好了，因为我刚刚开始使用 LESS 模板。干杯!

{extends file='parent:frontend/index/header.tpl'}

@phoneLandscapeViewportWidth: 30em;     
@tabletViewportWidth: 48em;             
@tabletLandscapeViewportWidth: 64em;    
@desktopViewportWidth: 78.75em;


when (@media screen and (min-width: @tabletLandscapeViewportWidth)=true) {
{block name="frontend_index_header_css_screen" append}
    <link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_public/src/css/custom.css'}" />
{/block}
}

@media screen and (max-width: @tabletLandscapeViewportWidth) {
{block name="frontend_index_header_css_screen" append}
    <link type="text/css" media="screen, projection" rel="stylesheet" href="{link file='frontend/_public/src/css/mobile.css'}" />
{/block}
}

Answer 1

首先:正如评论已经指出的那样，您正在混淆不同的语言。

到目前为止 - 从您的示例来看 - 您正在处理三件事情，在您尝试时不能以这种方式组合它们:

1. LESS:这是一种预处理器语言 - 至少在 Shopware 5 上下文中用于编译和生成您的 CSS文件(有一种方法可以直接包含 LESS 文件，但不建议将其用于生产，因此我将省略这一部分)。
2. CSS:呈现的样式表。如果您将它们静态地包含到您的模板中(我的意思是如果您没有使用 Javascript 来动态更改您的 DOM)，您将必须决定在呈现 DOM 之前是使用一个还是另一个 CSS 文件.
   这将我们带到下一个 CSS 相关主题:
   1. 媒体查询:媒体查询的概念并不意味着动态更改 DOM(即清除一个 CSS 样式表并引入另一个)。
      想象一下以下情况:您坐在台式电脑前，慢慢地将浏览器的窗口拖动得越来越小，直到您的视口(viewport)宽度小于 64em (@tabletLandscapeViewportWidth)。媒体查询应该做什么？请求服务器加载另一个资源？
      请记住:媒体查询是 CSS，而 CSS 就是您网站的样式。在正常情况下，它会在页面加载时提供一次，其余的魔术将在您的客户端中发生。没有与服务器的进一步通信(我猜这就是您要尝试做的)。
3. Smarty (.tpl):您在这里混淆的第三部分是 .tpl 文件，它们来自 Smarty-Template-Engine。所以我们必须在这里明确:Smarty 呈现 您的模板。这发生在服务器端之前页面被传送到请求客户端。
   这意味着你可以决定此时加载一个或另一个 css(但不是通过媒体查询，我稍后会回来)但是一旦页面被交付给客户端，Smarty 的工作就结束了，它会做没有另一个服务器请求(即通过 AJAX 调用)什么都没有。

我必须承认，我并不是完全理解您想要实现的目标。如果您只对特定视口(viewport)宽度进行一些 CSS 定义，则根本不需要进入模板。

假设您只希望在视口(viewport)大于@tabletViewportWidth 时应用custom.css 中的样式，并且下面的所有内容都应该适用于移动设备。 CSS.

因为你可以在 CSS3 中嵌套媒体查询，所以将整个 less 文件包装成这样的媒体查询应该不是问题:

@media screen and (min-width: @tabletLandscapeViewportWidth) {
   // all your custom.css content
}

@media screen and (max-width: @tabletLandscapeViewportWidth) {
   // all your mobile.css content
}

但请记住，这不包括所有其他媒体类型，因此您可能应该使用 @media all。

如果您真的想动态更改样式表，您应该使用像Modernizr 这样的库。并制作一个动态更改样式表的 AJAX 请求，但恕我直言，这是一种丑陋的解决方案，只有在没有样式表时才有意义(不是真实的，但有点幻想)加载(或具有样式的基本样式表，两个 .css 文件共享)并进行调用以请求较小的 CSS 文件。但是，如果 production-css-file 被缩小，那么这样做就不值得了。

如您所见，在提供的解决方案中，我们甚至没有接触 smarty-tpl 文件。但是如果你和 smarty 一起工作，我想提一点:您在这里扩展一个文件，因此每个垃圾代码都需要位于您正在扩展的 {block} 标签的内部。否则 Smarty 不知道将代码放在哪里，并且会抛出错误(尽管如此，LESS-Code 在这里无论如何都不起作用 ;))。

问候