如何让 Materialize CSS 框架（sass 版本）仅在大屏幕上不响应

Question

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

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

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

// 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;

Answer 1

从技术上讲，Tesla 网站在大屏幕上是响应式的，因为无论宽度如何，背景图像都会 100% 扩展。

但是我看到你说的从 640 像素到大约 960 像素，特斯拉图像的最小固定宽度延伸到浏览器窗口之外..

如果您在大屏幕断点处开始移动优先，请确保所有相关容器都具有最小固定宽度。

.hero {
    width: 100%;
    min-width: 960px;
}

如果没有提供任何 HTML 或 CSS，我只能说这些