LESS 限制 CSS-files 到某些视口（Shopware）

Question

我运行今天在使用 Shopware 时遇到了问题。我想限制某些 CSS 文件（移动设备 css 和桌面设备 css）的使用。

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

如果你能在这里帮助我就太好了，因为我刚刚开始使用 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

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

现在 - 从你的例子来看 - 你正在处理三件事，在你尝试时不能以那种方式组合它们：

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

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

假设您只希望在视口大于 @tabletViewportWidth 时应用 custom.css 中的样式，并且下面的所有内容都应为 mobile.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-Request 来动态更改样式表，但恕我直言，这有点丑陋如果加载 no 样式表（或带有样式的基本样式表，两者都 .css-files share) 并且调用是为了请求一个更小的 CSS-File. 但是如果生产-css-文件被缩小，那么这就不值得了。

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

问候

LESS 限制 CSS-files 到某些视口（Shopware）

LESS restricting CSS-files to certain viewports (Shopware)

css

less

shopware