屏幕更改时CSS切换网格类(CSS Switch grid class when screen changed)

屏幕更改时CSS切换网格类(CSS Switch grid class when screen changed)

我有个问题。 我正在构建自己的CSS框架，但我在网格系统中遇到了一些问题。 当屏幕尺寸发生变化时，我想切换网格类。 例如，在Zurb基金会我们网格：

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

所以在大屏幕上，div的宽度是2/12。 在中画面中，div的宽度是4/12。 在小屏幕上，div的宽度是8/12。

谁能告诉我如何做到这一点？

I have a question. I'm building my own css framework but I have some problem with grid system. I wanna switch grid class when screen size changed. Example, In Zurb Foundation we grid:

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

So in the large screen, the div's width is 2/12. In the medium screen, the div's width is 4/12. In the small screen, the div's width is 8/12.

Can anyone tell me how to do this?

最满意答案

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

/* 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/

This is the media queries that most of the world use this day:)

/* 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/