Twitter bootstrap 如何使用@media query确定特定屏幕大小？

我是响应式设计的新手，我现在正在玩弄twitter bootstrap responsive.css。我的项目遇到了一些麻烦

问题是，我的左列不会崩溃（如果这是正确的术语），也不会堆积起来。我想要的是，左列将移到span8列下方，并调整其宽度。现在它所做的是，左列的宽度减小并压缩其中的所有内容。我的目标是移动屏幕尺寸为768x1024媒体屏幕

我对布局的基本标记是，span8表示左侧，span4表示右侧。span4是我的其他街区

一些有内容的块

---

我的主要问题是，我们如何使用媒体查询（使用twitter引导）定位特定的屏幕大小。然后定制它以满足我们的需要？

您需要使用

行流体

类（而不是

行

类），以便从引导的响应部分获益。阅读更多信息

因此，您的基本布局应该是：

...
...

通过阅读博客上的文章和已回答的堆栈溢出问题，以及您对这个问题的评论中发布的文章，我终于得到了这个答案

基于移动设备的常见断点和视图端口，即1200px宽的视口（用于大型destkop），我必须在媒体查询中插入我自己的样式

即，

@media（最小宽度）{mystyle here}

@介质（最小宽度：1200px）{
霉菌携带者{
宽度：960px；
保证金：0自动；
}
.myleftBlock应该崩溃{
浮动：无；
宽度：100%；
}
}

因为我使用的是Twitter Bootstrap Responsive.css文件，所以我需要为某些视口自定义媒体查询，以便它能够满足我的设计需要

由于我正在设计960px的固定宽度，我将定制并重新计算.container和span类的宽度。我将把像素转换成基本宽度为960px的百分比

因此，我希望在某些视口中折叠、隐藏或显示的任何块或元素，都应在媒体查询中相应地设置样式

---

而且。。。关于响应式设计，我学到了新东西。屏幕大小与视口不同。

由于您使用的是引导，请使用默认变量来指定特定的屏幕大小：

// Extra small screen / phone
$screen-xs:                  480px !default;

// Small screen / tablet
$screen-sm:                  768px !default;

// Medium screen / desktop
$screen-md:                  992px !default;

// Large screen / wide desktop
$screen-lg:                  1200px !default;

例如：

@media (min-width: $screen-sm) and (max-width: $screen-md) {
    /*
     * styles go here
     */
}  

---

引导中的row fluid类exapmles可在此处找到

如果希望Visual Studio帮助使用CSS，请从中获取LESS文件，并获取Twitter.Bootstrap.LESS nuget包。然后将以下内容添加到bootswatch.less文件

@import url("bootstrap/bootstrap.less");

有一种替代增压排流体的方法，称为“基础”

它定义了“小”和“大”媒体以及更多内容：

<div class="show-for-small" style="text-align: center">
    <a href="#">Desktop here</a>
</div>
<div class="large-4 columns hide-for-small">
    <a href="#">
        <div class="panel radius callout" style="text-align: center">
        <strong>Mobile here</strong>
        </div>
    </a>
</div>

---

另外一个有趣的原因是，您还可以在

标记的媒体属性中使用媒体查询

<link href="style.css" rel="stylesheet">
<link href="justForFrint.css" rel="stylesheet" media="print">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 768px)">

这样，浏览器将下载所有CSS资源，而不考虑媒体属性。 不同之处在于，如果媒体属性的媒体查询计算为false，则该.css文件及其内容将不会被渲染阻止。

因此，建议在

标记中使用媒体属性，因为它可以保证更好的用户体验

在这里你可以阅读一篇关于这个问题的谷歌文章

一些工具将帮助您根据媒体查询自动分离不同文件中的css代码

网页包

邮政编码

---

我正在开发一种固定宽度的响应式布局。它的最大宽度为940px，我想要的是将768的样式应用到800px视口。我现在对如何使用媒体查询有了一点了解。引导站点有用于引导的媒体查询。您可以根据自己的需要进行调整：