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

问题描述

我是响应式设计的新手，我现在正在玩 twitter bootstrapresponsive.css.我的项目遇到了一些问题.

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

我对布局的基本标记是，左边的 span8 和右边的 span4.span4 是我的其他块所在的位置.

<div class="span8">一些包含内容的块
<div 类 =span4"><div class="sideBlock"><!--设置了流体宽度--><img src="http://placehold.it/298x77">

我的主要问题是，我们如何使用媒体查询(使用 Twitter 引导程序)定位特定的屏幕尺寸.然后自定义它以满足我们的需求?

解决方案

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

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

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

@media (min-width: 1200px) {.myContainer {宽度:960px；边距:0 自动；}.myleftBlock-should-collapse {浮动:无；宽度:100%；}}

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

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

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

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

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

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.

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>

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.

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.

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

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

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

 }

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.

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