Question

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

问题是，我的左栏不会崩溃（如果这是正确的术语），或者不会叠加。我想要的是，左列应移动到span8列下方并调整其宽度。它现在做的是，左列的宽度减小并挤压其内部的所有内容。我的目标是移动屏幕尺寸为768x1024媒体屏幕。

布局的基本标记是，左边是span8，右边是span4。 span4是我的其他块。

<div class="row">
<div class="span8">
    some block with contents
</div>

<div classs="span4">
    <div class="sideBlock"><!--fluid width was set-->
        <img src="http://placehold.it/298x77">
    </div>
</div>

我的主要问题是，我们如何使用媒体查询（使用twitter bootstrap）来定位特定的屏幕尺寸。然后根据我们的需求进行定制？

Answer 1

由于您使用的是Bootstrap，请使用默认变量来定位特定的屏幕尺寸：

// 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
     */
}

Answer 2

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

基于移动设备的常见Breakpoints和View-ports，即大型destkops的1200px宽视口，我必须在媒体查询中插入自己的样式。

I.E。，@media (min-width) {mystyle here}

@media (min-width: 1200px) {
      .myContainer {
           width: 960px;
           margin: 0 auto;

      }
      .myleftBlock-should-collapse {
           float: none;
           width: 100%;
      }

 }

由于我使用的是Twitter Bootstrap Responsive.css文件，我需要为某个视口自定义媒体查询，以便它符合我的设计需求。

好吧，因为我正在设计固定宽度960px，我将自定义并重新计算我的.container和span类的宽度。我将从我的基本宽度960px转换为像素百分比。

因此，无论我想要折叠，隐藏或显示在某些视口中的块或元素，都应在媒体查询中进行相应的样式设置。

而且......我学到了关于响应式设计的新东西。屏幕尺寸与Viewport不同。

Answer 3

可以在此处找到Bootstrap中的行 - 流体类exapmles http://getbootstrap.com/2.3.2/examples/fluid.html

如果您希望Visual Studio帮助CSS，那么从http://bootswatch.com获取LESS文件，并获取Twitter.Bootstrap.Less nuget包。然后将以下内容添加到bootswatch.less文件

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

还有替代Boostrap行液，称为“基础”＃39; http://foundation.zurb.com/develop/download.html#customizeFoundation

它有＆＃39;小＆＃39;的定义。和＆＃39;大＆＃39;媒体等等：

<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>

Answer 4

您需要使用row-fluid类（而不是row类）才能从Bootstrap的响应部分中受益。阅读更多http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem。

所以你的基本布局应该是：

<div class="row-fluid">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Answer 5

另一个有趣的功能是，您还可以在<link>标签的 media 属性中使用媒体查询。

<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资源，而不管 media 属性如何。 区别在于，如果将media属性的media-query评估为 false ，则该.css文件及其内容将不会被阻止。

因此，建议使用<link>标签中的 media 属性，因为它可以确保更好的用户体验。

在这里您可以阅读有关此问题的Google文章https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

某些工具可根据您的媒体查询自动将CSS代码分隔在不同文件中

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query

如何使用@media媒体查询定位特定的屏幕大小？

5 个答案: