Question

我使用Materialise CSS SASS版本来构建网站。我想让它只对大屏幕没有响应（任何高于中等/平板电脑的视图）但我想保持它对中小屏幕的响应。我怎么能这样做？

这是特斯拉网站的一个网站示例：

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

技术上，特斯拉网站在大屏幕上响应，因为无论宽度如何，背景图像都会延伸100％。

但是我看到你说的是从640px到大约960px，特斯拉图像的最小固定宽度超出浏览器窗口..

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

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

我可以说没有任何HTML或CSS提供

如何才能使Materialise CSS框架（sass版本）仅在大屏幕上响应

1 个答案: