CSS切换网格类时，屏幕改变

Question

我有一个问题。我正在构建自己的css框架，但我有网格系统的一些问题。我想在屏幕大小改变时切换网格类。示例:在Zurb Foundation中，我们使用grid:

<div class="small-8 medium-4 large-2 columns"> Content </div>

在大屏幕上，div的宽度是2/12。在中屏幕中，div的宽度是4/12。在小屏幕上，div的宽度为8/12。

谁能告诉我怎么做这个?

Answer 1

这是当今世界上大多数人使用的媒体查询:)

/* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {
    }
    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {
    }
    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    }
    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
    }
    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {
    }

http://www.asmhijas.com/

Answer 2

你也可以使用这个…

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 50px) and (max-width: 200px)" href="Style/screen_layout_small.css" />
    <link rel="stylesheet" type="text/css" media="only screen and (min-width: 1000px) and (max-width: 1250px)" href="Style/screen_layout_1024.css" />

screen_layout_1024.css

#content {
   width: 1000px;
   height: auto;
}

screen_layout_small.css

#content {
   width: 150px;
   height: auto;
}