我一直在做一个有多个页面的项目。它的网络版本几乎完成,我现在需要响应。 作为,我是 angular 的新手,我想知道如何使用 SASS 和 Bootstrap 在 angular5 中添加媒体查询。
我做了一些研发,找到了一种在css文件中添加媒体的方法,如下所示:
/**** Define media breakpoint variables**/
$desktop: 960px
$tablet: 768px
$mobile-large: 640px
$mobile: 480px
$mobile-small: 300px
/**** mix your media queries inside a class that you want to change**/
.item
width: 25%
display: inline-block
@media only screen and (max-width: $tablet)
width: 50%
@media only screen and (max-width: $mobile-large)
width: 100%
什么是正确的标准。
谢谢
如果你使用 bootstrap 和 SASS,它可能是这样的:
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
// Example usage:
@include media-breakpoint-up(sm) {
.some-class {
display: block;
}
}
文档中的详细信息:https://getbootstrap.com/docs/4.0/layout/overview/