中等断点在 Foundation 6 中不起作用答案

【问题标题】：Medium breakpoint not working in Foundation 6中等断点在 Foundation 6 中不起作用
【发布时间】：2018-04-09 14:50:17
【问题描述】：

上周我从 bootstrap 4 切换到 Foundation 6。所以可能是因为我缺乏基础经验。

但是我的断点有问题。小断点永远不起作用。它总是显示中等断点。这是我的代码示例和我正在制作的宽度为 320 像素的页面的屏幕截图。

Screenshot of issue

<div class="grid-container">
    <section class="section">
    <h1 class="text-center">{{ entry.title }}</h1>
    <p class="text-center">{{ entry.subtext }}</p>

    <div class="grid-x activities">
        {% for activiteit in entry.activiteiten %}
        <div class="small-12 medium-4 cell">
            <div class="activity-card padding-2" style="background-color: {{ activiteit.kleurActiviteit }};">
                <div class="activity-card__image text-center">
                    <div style="background-image: url({{ activiteit.activiteitafbeelding.first().getUrl() }});"></div>
                </div>
                <div class="activity-card__title text-center">
                    <h2>{{ activiteit.title }}</h2>
                </div>
                <div class="activity-card__subtext">
                    <p class="text-center">{{ activiteit.korteTekst }}</p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

</section>

【问题讨论】：

标签： css zurb-foundation breakpoints

【解决方案1】：

我解决了我自己的问题。必须在我的 html 标头中设置视口元标记。

<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

【讨论】：