css - 如何让 Materialize CSS 框架(sass 版本)不响应大屏幕

Question

我正在使用 Materialise CSS SASS 版本来构建网站。我想让它仅对大屏幕(任何高于中型/平板电脑 View )没有响应，但我想让它对中型和小型屏幕保持响应。我该怎么做？

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% 扩展。

但我明白你所说的从 640px 到大约 960px 的特斯拉图像有一个最小的固定宽度，可以延伸到浏览器窗口之外..

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

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

在没有提供任何 HTML 或 CSS 的情况下，我只能说这些