gpt4 book ai didi

css - Bourbon Neat 断点在电话上不起作用

转载 作者:行者123 更新时间:2023-11-28 09:47:01 25 4
gpt4 key购买 nike

我正在尝试制作一个基于 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);
}
}

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

最佳答案

您似乎忘记了视口(viewport)元标记。

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

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

关于css - Bourbon Neat 断点在电话上不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29453465/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com