屏幕更改时CSS切换网格类

Question

我有一个问题。 我正在构建自己的css框架，但我对网格系统有一些问题。 我想在屏幕尺寸改变时切换网格类。 例如，在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;
}