如何编写引导媒体查询

Question

我不知道如何为 768*1024 和更大的设备编写引导媒体查询。我知道我可以使用@media 然后使用屏幕尺寸{}，但是我已经为每个标签按钮和其余元素编写了 css？有什么捷径吗？如果我必须写，那我该怎么写。请有人向我提供引导 @media 查询的示例代码，以使我的应用程序在类似平板电脑的设备中响应。

提前致谢。

Answer 1

...根据设备的大小，有许多类可以帮助您在特定分辨率下实现您想要的效果。

首先在下载之前的引导程序的定制器中，您可以设置自己的断点，然后根据您可以使用的类 -xs- -sm- -md- -lg- 以及您要使用的类就可以了具体决议。

例如：

使用 class 'visible-xs-block' 意味着应用 display:block 样式的这个类将只出现在 XS 设备中 - 这取决于您是否有自定义断点或使用默认设置（适用于最大 767px 的设备）

编辑：如果您使用的是“visible-lg-block”类，则意味着该类仅适用于大型设备（≥1200px）。

当然你可以混合和匹配你想要的类，你可以在同一个元素上使用这两个类，比如：

<div class="visible-xs-block visible-lg-block">

..这将使元素仅在 xs 和 lg 设备上可见。

您可以通过在线帮助了解功能/等；

http://getbootstrap.com/css/

Answer 2

只要您使用它们的网格系统，Bootstrap 就已经可以响应平板电脑和手机（例如，尝试在此类设备中查看主要的 Bootstrap 站点）。如果您想覆盖或扩展其默认响应行为，则只需要媒体查询。

Answer 3

Sudarashan 我认为，如果我正确阅读了您的进一步 cmets，那么您对 ​​768px width 屏幕尺寸高达 1024px 的问题有疑问。

这段代码（取自Bootstrap site）显示了引导程序运行的标准断点。

---

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in 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) { ... }

---

您最初的问题提到您希望在 768px 和 1024px 之间做出回应。这将在 sm (small) 768px

的参数内开始响应

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

但是，然后会遇到 md (medium) 参数 992px（及以上）一直到所需的 1024px你的目标。

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

解决方案

在这种情况下，您可能还需要编写一个新的媒体查询，该查询仅限于此处所需的参数。根据我的理解，应该是这样的：

/* Custom sizes (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {... }

我认为这应该提供适合您的应用所需的断点。