基金會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