Question

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

提前致谢。

Answer 1

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

Answer 2

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

首先在下载之前的bootstrap自定义程序中你可以设置自己的断点，然后根据你可以使用-xs- -sm- -md- -lg-的类和你想要使用它的类一样对于具体的决议。

例如：

使用class＆＃39; visible-xs-block＆＃39;表示应用display：block样式的这个类只会出现在XS设备中 - 这取决于你是否有自定义断点或使用默认设置，最多可达767px

编辑：如果您使用的是课程＆＃39; visible-lg-block＆＃39;相反，这意味着该类只适用于大型设备（≥1200px）。

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

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

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

您可以在线使用帮助来学习函数/等;

http://getbootstrap.com/css/

Answer 3

Sudarashan我想如果我正确地阅读了你的进一步评论，你就会遇到特别是768px 宽度屏幕尺寸高达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（小） 768px

的参数范围内开始响应

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

但是，然后会进入 md（中）参数 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) {... }

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

如何编写引导媒体查询

3 个答案:

解决方案