SASS bootstrap媒体查询/ sass文件

Question

我想用SASS Bootstrap制作一个响应式网站，但是我遇到了sass样式表的问题。

当我包含我的样式表的sass版本时，它只挑选我的HTML的某些元素，如顶级元素，而不是行或列中的任何元素，而CSS版本完美地工作。

我也为我的媒体查询制作了单独的样式表，它没有响应！

头：

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<link href="css/sass-bootstrap.css" rel="stylesheet"> 
<link href="sass/main.scss" rel="stylesheet"> 
<link href="sass/media-screens.scss" rel="stylesheet"> 

脚本：

<script src="https://code.jquery.com/jquery.js"></script> 
<script src="js/sass-bootstrap.min.js"></script> 

媒体查询：

$screen-lg-min: 1200px; 
$screen-md-min: 992px; 
$screen-sm-min: 768px; 

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Sass Bootstrap */ 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: $screen-sm-min) { 

} 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: $screen-md-min) { 

} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: $screen-lg-min) { 

.header .navigation ul.primary-menu > li a { 
    font-size: 1.145em; 
    padding: 0 1.24em; 
} 
} 

我可能做错事，但如果任何人都可以是任何帮助，我将不胜感激它。

Answer 1

Read about how to compile Sass files into CSS

基本上你只需要对它们进行编译：

$ gem install sass 
$ sass sass/main.scss main.css 
$ sass sass/media-screens.scss media-screens.css 

然后在编辑这个你HTML

<link href="main.css" rel="stylesheet"> 
<link href="media-screens.css" rel="stylesheet"> 

我建议设置了监视任务的快速发展

$ sass --watch main.scss:main.css 

在最后一个例子中，我将importing媒体查询样式表推荐为main，所以您不必编译一堆文件。

甚至更​​好的是，使用像Grunt这样的自动构建工具为您完成所有这些工作。

Answer 2

<link href="sass/main.scss" rel="stylesheet"> 
<link href="sass/media-screens.scss" rel="stylesheet"> 

看起来您在您的页面中使用了scss文件，但浏览器不支持scss文件。首先你需要编译SCSS文件，CSS文件，也许SCOUNT应用程序可以帮助您：http://mhs.github.io/scout-app/

Answer 3

感谢您的建议约瑟夫。我将我的媒体查询添加到样式表的底部，但主要问题是因为我没有将屏幕设置为正确的宽度。我结束了以下内容：

/* Extra Small devices (mobiles, 320px and up) */ 
@media (min-width: 320px) and (max-width: 767px) {} 

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) and (max-width: 991px) {} 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) and (max-width: 1199px) {} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) and (max-width: 1920px;) {} 

Answer 4

// DEVICE LIST // 
$xs-min: "only screen and (min-width:none)"; 
$xs-max: "only screen and (max-width:520px)"; 
$xs-sm: "only screen (min-width: none) and (max-width:767px)"; 

$sm-min: "only screen and (min-width:768px)"; 
$sm-max: "only screen and (max-width:991px)"; 
$sm-md: "only screen (min-width: 768px) and (max-width:991px)"; 

$md-min: "only screen and (min-width:992px)"; 
$md-max: "only screen and (max-width:1199px)"; 
$md-lg: "only screen (min-width: 992px) and (max-width:1199px)"; 

$lg-min: "only screen and (min-width:1200px)"; 
$lg-max: "only screen and (max-width:none)"; 

写下你的设备列表上面的一样，定制断点。在SCSS中使用它时使用＃{}。另外请确保您使用的是指南针，因为它使用指南针的辅助方法。

/* Small devices (tablets, 768px and up) */ 
@media #{$sm-min} { 

} 

/* Medium devices (desktops, 992px and up) */ 
@media #{$md-min} { 

} 

/* Large devices (large desktops, 1200px and up) */ 
@media #{$lg-min} { 

.header .navigation ul.primary-menu > li a { 
    font-size: 1.145em; 
    padding: 0 1.24em; 
} 
}