如何仅使用 Materialize CSS 为大屏幕创建非响应式网页？答案

【问题标题】：How can I create a non-responsive web page for large screens only using Materialize CSS?如何仅使用 Materialize CSS 为大屏幕创建非响应式网页？
【发布时间】：2018-03-12 22:05:48
【问题描述】：

我正在使用 Materialise CSS SASS 版本来构建一个网站。我想让它只对大屏幕无响应（任何高于中等/平板电脑视图），但我想让它对中小屏幕保持响应。我该怎么做？

Tesla 网站就是这样的网站示例：

https://www.tesla.com/en_GB/

一旦达到某个点，它就会停止响应

来自 _variables.scss 文件的 SCSS

 // 12. Global
// ==========================================================================

// Media Query Ranges
$small-screen-up: 601px !default;
$medium-screen-up: 993px !default;
$large-screen-up: 1201px !default;
$small-screen: 600px !default;
$medium-screen: 992px !default;
$large-screen: 1200px !default;

$medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
$large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;
$extra-large-and-up: "only screen and (min-width : #{$large-screen-up})" 
!default;
$small-and-down: "only screen and (max-width : #{$small-screen})" !default;
$medium-and-down: "only screen and (max-width : #{$medium-screen})" !default;
$medium-only: "only screen and (min-width : #{$small-screen-up}) and (max-
width : #{$medium-screen})" !default;

【问题讨论】：

只需将其设置为您想要的大小，其余的不要关心...不要使用媒体查询或类似的东西。如果它是响应式的并且您根本不想要它，请从 css 或 sass 文件中删除所有媒体查询
如果你有相同的内容，在不同的屏幕尺寸下看起来会有所不同，那么它就是响应式的。
@kevinniel 感谢您的回复。我仍然想让它对中小屏幕保持响应，而不是更大的屏幕。我不确定要删除或更改 _variables.scss 文件中的哪些内容，我假设这是需要进行调整的地方。我将附上问题的文件。
I would still like to keep it responsive for medium and small screens just not anything larger. 和你的头衔：How can I create a non-responsive web page for large screens only using Materialize CSS? 尽量保持逻辑，至少说出你想要什么......这没有意义......
真的吗？这对我来说似乎很清楚。我有一个在大、中、小屏幕上响应的网页。我想让它在中小型屏幕上保持响应，但不适用于大屏幕。我发布的 Tesla 网站链接做了类似的事情，它到达一个点并且在达到中等屏幕尺寸之前变得无响应。

标签： html css materialize responsive

【解决方案1】：

简单：

//default mobile
body{
  color:red;
}
// Tablet Up
@media all and screen(min-width: 768px){
  body{
    color: green;
  }
}

完成！

我希望你不想让整个框架停止响应。

但是，如果是这种情况，请重新定义变量。

// Reasign media variables
$small-screen-up: 768px !default;
$medium-screen-up: 768px !default;
$large-screen-up: 768px !default;
$small-screen: 767px !default;
$medium-screen: 767px !default;
$large-screen: 767px !default;

通过这些更改，您应该最终得到一个响应式括号。

【讨论】：

感谢您的回复。不，我只是希望它停止响应大屏幕及以上。我在我的问题中添加了包含媒体查询的文件中的 SCSS。关于如何将您的解决方案应用于该 SCSS 的任何想法？我是网络开发的新手，因此感谢您提供任何帮助。
@Lujane 您可以重新分配媒体变量。