如何修改Materialize CSS中移动端视图的默认屏幕尺寸？

嘿，这个问题我刚好折腾过！Materialize默认的移动端断点确实是<=600px，要改成<=700px的话，分两种场景来操作最稳妥：

这是Materialize官方推荐的自定义方式，能从根源上修改断点，避免样式冲突：

• 首先确保你使用的是Sass版本的Materialize（不是直接引入编译好的.css文件）
• 找到Materialize的Sass变量配置，默认的断点变量是这样的：

  $breakpoints: (
    xs: 0,
    sm: 600px, // 这就是移动端到平板的断点
    md: 992px,
    lg: 1200px,
    xl: 1920px
  );
  

• 把sm的值改成700px，然后重新编译你的Sass项目。这样所有依赖s前缀的类（比如你的col s12）都会自动适配新的<=700px断点，其他响应式组件（导航栏、卡片等）也会跟着同步更新。

如果不想折腾Sass编译，也可以直接在自定义CSS里覆盖默认的媒体查询，但需要注意覆盖全所有相关样式：

• 首先把你的自定义CSS文件放在Materialize的CSS文件之后引入，保证优先级更高
• 重新定义<=700px下的s前缀网格类样式，同时覆盖原来的<=600px断点样式：

  /* 新的移动端断点：<=700px */
  @media only screen and (max-width: 700px) {
    /* 覆盖所有s前缀的列宽度 */
    .col.s1 { width: 8.3333333333%; }
    .col.s2 { width: 16.6666666667%; }
    .col.s3 { width: 25%; }
    .col.s4 { width: 33.3333333333%; }
    .col.s5 { width: 41.6666666667%; }
    .col.s6 { width: 50%; }
    .col.s7 { width: 58.3333333333%; }
    .col.s8 { width: 66.6666666667%; }
    .col.s9 { width: 75%; }
    .col.s10 { width: 83.3333333333%; }
    .col.s11 { width: 91.6666666667%; }
    .col.s12 { width: 100%; }
  
    /* 还要覆盖偏移类、对齐类等 */
    .offset-s1 { margin-left: 8.3333333333%; }
    .offset-s2 { margin-left: 16.6666666667%; }
    /* ... 以此类推，覆盖所有s前缀的辅助类 */
  
    /* 另外，还要覆盖其他依赖断点的组件样式，比如导航栏折叠、卡片布局等 */
  }
  
  /* 禁用原来的600px断点样式，避免冲突 */
  @media only screen and (max-width: 600px) {
    .col.s1, .col.s2, .col.s3, .col.s4, .col.s5, .col.s6,
    .col.s7, .col.s8, .col.s9, .col.s10, .col.s11, .col.s12,
    [class*="offset-s"] {
      /* 清空原有样式，让新样式优先级更高 */
      width: auto !important;
      margin-left: 0 !important;
    }
  }
  

⚠️ 提醒一下：方法二需要手动覆盖大量样式，容易遗漏，后续维护也麻烦，所以如果项目允许，优先用Sass的方式修改。

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