如何在materialize css中更改移动视图的默认屏幕大小？

Question

<div class="row">
     <div class="col s12 m6 l6">

     </div>
</div>

移动视图的默认屏幕大小是＆lt; = 600px in materialize css但是如何将此屏幕大小增加为＆lt; = 700px？

Answer 1

如果要覆盖materialise css，则必须在自定义css文件中使用媒体查询，该文件应在materialize.css文件下面定义

@media only screen and (min-width: 701px){
  .s12{
    width:100%
  }
  .hide-on-small-only{
    display:none;
  }
  /* other css...    */
}

Answer 2

找到materialize.css文件中的所有行

@media only screen and (min-width: 601px)

并将其替换为以下内容：

@media only screen and (min-width: 701px)

Answer 3

您在其库的组件文件夹中签入 _variables.scss。按 ctrl+f 然后输入媒体查询范围。您将能够设置所需的限制。