Bourbon Neat 断点在 phone 上不起作用

Question

我正在尝试制作一个基于 Bourbon Neat 网格的响应式网站。当我在自己的计算机上将浏览器的大小调整为 phone 的大小时，我的媒体查询工作正常，但是当我在我的 phone 上加载网站时，出现 none 的移动更改.

我目前有以下代码：

// Breakpoints
$mobile: new-breakpoint(max-width 480px, 12);
$landscape: new-breakpoint(max-width 780px min-width 481px, 16);
$desktop: new-breakpoint(min-width 781px);
/***************
    ONBOARDING
***************/
.onboarding {
    @include media($mobile) {
        @include span-columns(10);
        @include shift(1);
    }
    @include media($landscape) {
        @include span-columns(9);
        @include shift(4);
    }
    @include media($desktop) {
        @include span-columns(8);
        @include shift(8);
    }
}

为了完成这项工作，我还需要添加什么吗？

Answer 1

您似乎忘记了视口元标记。

尝试将此添加到您的 html 头部：

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

Bourbon Neat 断点在 phone 上不起作用

Bourbon Neat breakpoints not working on phone

css

mobile

breakpoints

neat

responsive-design