Question

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

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

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;

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

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

如何仅使用Materialise CSS为大屏幕创建无响应的网页？

1 个答案: