基金会4媒体查询

Question

我是CSS设计的初学者。

我正在使用Foundation 4（Zurb）来设计我大学项目的前端。我了解到Foundation 4在设计响应式设计时本质上是敏感的。

基金会4是否有任何需要CSS媒体查询？如果是，那我该如何使用它，从中得到什么好处？

Answer 1

你应该阅读文档的“媒体查询”和“网格”部分： http://foundation.zurb.com/docs/

<div class="row"> 
    <div id="block" class="small-2 large-8 columns">Content</div> 
</div> 

此代码将使“＃阻止”要宽2列，每屏幕尺寸由于到“小二”班。大8级课程在768px及以上的窗口宽度上覆盖该行为，使其在大屏幕上成为8列宽。

为简化起见，该代码会将“#block”渲染为手机屏幕上的2列宽和桌面屏幕上的8列。

如果您需要IE6-8支持，你需要使用Respond.js太： https://github.com/scottjehl/Respond