Bourbon Neat 断点在手机上不起作用答案

【问题标题】：Bourbon Neat breakpoints not working on phoneBourbon Neat 断点在手机上不起作用
【发布时间】：2015-05-23 08:05:01
【问题描述】：

我正在尝试制作一个基于 Bourbon Neat 网格的响应式网站。当我将自己计算机上的浏览器大小调整为手机大小时，我的媒体查询运行良好，但是当我在手机上加载网站时，没有出现任何移动更改。

我现在有以下代码：

// 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);
    }
}

为了完成这项工作，我还需要包括什么其他内容吗？

【问题讨论】：

标签： css mobile responsive-design breakpoints neat

【解决方案1】：

好像你忘记了视口元标记。

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

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

【讨论】：