时间戳

首页 > 解决方案 > Twig 根据分辨率对项目进行分组

javascript - Twig 根据分辨率对项目进行分组

问题描述

我有一个 for 循环遍历 div 并使用批处理对它们进行分组，我的分组大小需要根据分辨率进行更改，因此移动批处理应该是 1，而在桌面上它应该是 4，通过分辨率递增。

我怎样才能在 twig/drupal 中实现这一点？

{% for column in items|batch(4) %}
                <div {{ attributes.addClass('swiper-slide').removeClass(classes, 'field--items', 'swiper-wrapper') }}>
                    {% for item in column %}
                        <div{{ item.attributes.addClass('field--item') }}>{{ item.content }}</div>
                    {% endfor %}
                </div>
            {% endfor %}

标签： javascriptcssdrupaltwig

解决方案

Twig 在服务器端工作，它无法知道设备的分辨率。您可以使用库来通过他们User-Agent的请求标头来检测用户的设备，例如http://mobiledetect.net/

如果您从事响应式项目，请考虑使用 CSS @media 查询来实现多种分辨率。

推荐阅读