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

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

由于您使用的是引导程序，因此请使用默认变量来定位特定的屏幕尺寸：

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

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

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

即@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 转换为百分比基数。

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

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

Bootstrap 中的行流体类示例可以在这里找到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排流之外，还有另一种选择，称为"基础"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>

您需要使用 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>

一个额外有趣的问题是，您还可以在 <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资源，无论媒体属性如何。不同之处在于，如果媒体属性的媒体查询被计算为 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-pluginhttps://www.npmjs.com/package/media-query-splitting-plugin

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

相关内容

最新更新

热门标签：