如何使Materialize CSS（Sass版本）仅在大屏幕下禁用响应式

嘿，这个需求和特斯拉官网的布局逻辑完全一致！我帮你梳理下基于Materialize Sass版本的实现步骤，都是贴合框架本身的修改方式，不用动核心源码：

1. 先自定义断点和容器变量 #

在导入Materialize的Sass文件之前，先定义咱们的断点和容器规则（和框架默认值对齐，避免兼容性问题）：

// 对齐Materialize默认断点，明确中小屏/大屏幕的分界
$small-screen: 600px;
$small-screen-up: 601px;
$medium-screen: 992px;
$medium-screen-up: 993px;

// 自定义容器宽度：大屏幕下用固定值，中小屏保持自适应
$container-max-widths: (
  small: 600px,
  medium: 992px,
  large: 1200px // 这里改成你想要的大屏幕固定宽度，比如特斯拉的宽幅
) !default;

2. 写大屏幕的固定布局逻辑 #

导入Materialize核心文件后，添加媒体查询，专门针对大屏幕禁用响应式：

// 先导入Materialize的Sass核心（必须放在变量定义之后）
@import "materialize";

// 大屏幕（≥993px）的固定布局规则
@media only screen and (min-width: $medium-screen-up) {
  // 让整个页面主体固定宽度，居中显示
  body {
    max-width: map-get($container-max-widths, large);
    margin: 0 auto;
    // 解决页面两侧露底色的问题：用阴影模拟全屏背景，替换#fff为你的页面背景色
    box-shadow: 0 0 0 100vw #fff;
  }

  // 强制容器继承body的固定宽度，不再自适应拉伸
  .container {
    width: 100% !important;
    max-width: none !important;
  }

  // 如果用了侧边栏导航，大屏幕下隐藏汉堡按钮，强制导航展开
  nav .sidenav-trigger {
    display: none !important;
  }

  // 确保导航栏容器也跟着固定宽度走
  nav .nav-wrapper {
    width: 100%;
    max-width: none;
  }
}

3. 关键细节说明 #

• 特斯拉的核心逻辑：就是桌面端固定宽度居中，移动端自适应。咱们给body加固定max-width并居中，再用box-shadow补全背景，完美复刻这个效果。
• 断点灵活调整：如果你想把“大屏幕”的分界从993px改成别的（比如1200px），直接修改$medium-screen-up的值就行。
• 导航栏兼容：如果你的导航用了Materialize的sidenav组件，这段代码会自动在大屏幕下隐藏汉堡按钮，保持导航展开状态，和中小屏的折叠逻辑区分开。

4. 测试验证 #

• 手机屏（<601px）：正常响应式，导航折叠成汉堡菜单；
• 平板屏（601px-992px）：自适应布局，导航正常展开；
• 桌面屏（≥993px）：页面固定宽度居中，不再随屏幕拉伸，导航保持展开。

内容的提问来源于stack exchange，提问作者Lujane