如何使用@media媒体查询定位特定的屏幕尺寸? [英] How to target a specific screen size using @media media query?

问题描述

我是响应式设计的新手，我现在正在玩Twitter引导响应式.css.而且我的项目遇到了一些麻烦.

I am new to responsive design, I am toying with twitter bootstrap responsive.css now. And I am encountering some trouble with my project.

麻烦是，我的左列不会折叠(如果这是正确的术语)，也不会堆叠.我想要的是，左列应在span8列下方移动并调整其宽度.现在它要做的是，减小左列的宽度并将其所有内容压缩在其中.我的目标是移动屏幕尺寸为768x1024媒体屏幕.

The trouble is, my left column won't collapse (if that's the right term), or won't stack up. What I want is, the left column shall shift below the span8 column and resize it's width. What it does for now is, left column's width decreases and squeezing all it's contents inside it. I am targeting mobile screen size of 768x1024 media screens.

我对布局的基本标记是，span8表示左侧，span4表示右侧. span4是我其他块所在的地方.

My basic markup for the layout is, span8 for the left and span4 for the right. span4 is where my other blocks is.

<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引导程序)来定位特定的屏幕尺寸.然后自定义它以满足我们的需求?

My main question is, how do we target a specific screen size using media queries (using twitter bootstrap). And then customize it to fit our needs?

推荐答案

通过阅读博客中的文章和已解决的堆栈溢出问题以及您对这个问题的评论中发布的文章，我终于明白了这一点.

I finally got this one, by reading articles from blogs and stack overflow questions that had been answered, and articles posted from your comments on this question.

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

Based from common Breakpoints and View-ports for Mobile devices, i.e. 1200px wide viewport for large destkops, I have to insert my own style in a media query.

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文件，因此需要针对某些视口自定义媒体查询，以使其适合我的设计需求.

Since I am using the Twitter Bootstrap Responsive.css file, I need to customize the media query for certain viewport, so that It will fit to my design needs.

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

Well since I am designing a fixed-width of 960px, I will customize and re-calculate the widths for my .container and span classes. I will convert pixel to percent base from my base width of 960px.

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

So whatever block or element that I would want to collapse, hide or show in certain viewports, shall be styled accordingly inside the media query.

然后...我了解了响应式设计的新知识.屏幕尺寸与视口不同.

And... New thing I learned about responsive design. Screen size is different from Viewport.

这篇关于如何使用@media媒体查询定位特定的屏幕尺寸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！