CSS 屏幕切换时切换网格 class

Question

我有一个问题。 我正在构建自己的 css 框架，但我在使用网格系统时遇到了一些问题。 我想在屏幕尺寸改变时切换网格 class。 例如，在 Zurb Foundation 我们网格：

<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;
}