angular - 如何使用 Sass & bootstrap 4.1.3 在 Angular5 中添加媒体查询
问题描述
我一直在从事一个有多个页面的项目。它的网络版本几乎完成了,我现在需要进行响应式工作。作为,我是 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/
推荐阅读
- nativescript - 用于跟踪位置的 NativeScript 地理位置设置目的消息
- javascript - airbnb javascript指南中的switch示例用法是否不一致?
- nginx - 从 Nginx 子路径到不同端口的 root
- excel - 引用与使用 MAX 公式找到的单元格在同一行中的单元格
- google-app-engine - 如何在 Google Cloud Platform 中设置项目所有者
- node.js - 通过禁用第 3 方 XHR 呼叫来加速端到端测试
- jquery - 在 .card-columns 内的卡片元素上使用 scale() 会剪切第一行的顶部
- javascript - 使用 React-native 访问 Node 返回未处理的 Promise 拒绝警告 (id: 0)
- sql - 计算相同起点和终点的总报销
- ios - Simulator 10.2.1 command + R 在 react-native 中不起作用