屏幕更改时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/
更多推荐
发布评论