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

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 引导程序）定位特定的屏幕尺寸。然后对其进行定制以满足我们的需求？

Answer 1

另一个有趣的功能是您还可以在<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 代码分离到不同的文件中

网页包 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

Answer 2

可以在此处找到 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>

Answer 3

由于您使用的是 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 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

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

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

即，@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 的基本宽度转换像素为百分比基数。

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

而且...我学到了关于响应式设计的新知识。屏幕尺寸与视口不同。