5

我是响应式设计的新手，我现在正在玩 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 引导程序）定位特定的屏幕尺寸。然后定制它以满足我们的需求？

4

5 回答 5

19

由于您使用的是 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
     */
}
于 2014-07-23T21:45:06.633 回答
15

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

基于移动设备的常见断点和视口，即大型 destkops 的 1200 像素宽视口，我必须在媒体查询中插入我自己的样式。

IE，@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 文件，因此我需要为某些视口自定义媒体查询，以便它适合我的设计需求。

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

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

还有……我学到了关于响应式设计的新东西。屏幕尺寸与视口不同。

于 2012-08-13T05:01:12.520 回答
1

Bootstrap 中的 row-fluid 类示例可在此处找到 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 row-fluid 有一个替代品，称为“Foundation” http://foundation.zurb.com/develop/download.html#customizeFoundation

它有“小型”和“大型”媒体的定义等等：

<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>
于 2014-08-13T05:06:31.883 回答
0

您需要使用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>
于 2012-08-12T13:15:14.423 回答
0

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

<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-query 被评估为false，则该 .css 文件及其内容将不会被渲染阻塞。

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

在这里您可以阅读有关此问题的 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

于 2019-01-13T19:56:05.653 回答