响应式 Web 设计必备的 12 款 CSS 框架
openkk 12年前
<p> 目前接入互联网中的设备的多样性，催生了新的 Web 布局设计方式——响应式设计。响应式设计的理念是，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调 整。这样开发者就无需针对每种设备及分辨率分别创建独立的布局。</p> <p> 本文整理 12 款针对响应式布局设计的 CSS 框架，可以使你的开发工作变得轻松，并节省你的时间和成本。</p> <p> <strong><a href="/misc/goto?guid=4958333330043351904" target="_blank">1. Skeleton</a></strong></p> <p> Skeleton 是一系列 CSS 和 JS 文件的集合，它可以帮你快速地调整网页在不同分辨率下的显示效果，无论是 17 寸的笔记本电脑还是一个 iPhone。Skeleton 以轻量级的 960 网格系统为基础，可以优雅地等比例缩放桌面、平板、手机上的浏览尺寸。</p> <p style="text-align:center;"><img alt="响应式 Web 设计必备的 12 款 CSS 框架" src="https://simg.open-open.com/show/e5008451e88efedb545b849e85aa4714.jpg" width="450" height="300" /></p> <p> <strong><a href="/misc/goto?guid=4958183667660444505" target="_blank">2. Less Framework</a></strong></p> <p> Less 框架是一个用于设计自适应网站的 CSS 网格系统，它包含 4 个布局和 3 套预设布局，这些都以一个单一网格为基础。Less 框架的目标是更高效地创建多布局网站，并在布局之间保持一致。</p> <p style="text-align:center;"><img alt="响应式 Web 设计必备的 12 款 CSS 框架" src="https://simg.open-open.com/show/07702e1c6fb38b898ff339a44c9261ae.jpg" width="450" height="300" /></p> <p> <strong><a href="/misc/goto?guid=4958338175196780124" target="_blank">3. Foundation</a></strong></p> <p> Foundation 是一个易用的、强大的、灵活的框架，用于创建运行于任何设备上的网站原型和最终产品代码。Foundation 包含几十种风格和元素，你可以快速将它们进行组合，然后通过布局和设计，形成最终产品。</p> <p style="text-align:center;"><img alt="响应式 Web 设计必备的 12 款 CSS 框架" src="https://simg.open-open.com/show/9992b282ee8e35473a4e9eefea4288c4.jpg" width="450" height="300" /></p> <p> <strong><a href="/misc/goto?guid=4958338165991218868" target="_blank">4. The 1140 CSS Grid</a></strong></p> <p> 1140网格可以完美适应 1280 分辨率显示器。在较小的显示器上，它可以根据浏览器的宽度变成流体形式，并自适应浏览窗口。</p> <p style="text-align:center;"><img alt="响应式 Web 设计必备的 12 款 CSS 框架" src="https://simg.open-open.com/show/262af0a045f0eaa368352270c5d4f1b5.jpg" width="450" height="300" /></p> <p> <strong><a href="/misc/goto?guid=4958338180550152682" target="_blank">5. Golden Grid System</a></strong></p> <p> Golden 网格系统是为增强网页兼容性设计的折叠式网格，具有四个特征：列、跨页、底线、脚本。</p> <p style="text-align:center;"><img alt="响应式 Web 设计必备的 12 款 CSS 框架" src="https://simg.open-open.com/show/3f5cfcac02297b7f9b5e1143e4f92710.jpg" width="450" height="300" /></p> <p> <strong><a href="/misc/goto?guid=4958343748045364569" target="_blank">6. Frameless Grid</a></strong></p> <p> Frameless 和 Golden Grid System 类似，是通过逐列（column by column）形式来自适应页面布局，而不是通过逐像素（pixel by pixel）形式。Frameless 不是一个框架，因为它不包含任何代码，它只是一个特定类型的自适应网格的想法，你可以将它作为设计工作的一个很好的出发点。</p> <p style="text-align:center;"><img alt="响应式 Web 设计必备的 12 款 CSS 框架" src="https://simg.open-open.com/show/710bacf981357569e37f592b57523716.jpg" width="450" height="300" /></p> <p> <strong><a href="/misc/goto?guid=4958338182131105621" target="_blank">7. MQFramework</a></strong></p> <p> MQFramework 是一个响应式 CSS 框架，它使用@media 属性，允许你针对任何大小的浏览器设计你的网站。</p> <p style="text-align:center;"><img alt="响应式 Web 设计必备的 12 款 CSS 框架" src="https://simg.open-open.com/show/60a7cfa9fb327863708919b49b16ab6a.jpg" width="450" height="300" /></p> <p> <strong><a href="/misc/goto?guid=4958191197782798970" target="_blank">8. InuitCSS</a></strong></p> <p> 该框架用于使用较少的代码实现在较小屏幕（平板电脑、手机）上运行的项目，支持 IE6+。</p> <p style="text-align:center;"><img alt="响应式 Web 设计必备的 12 款 CSS 框架" src="https://simg.open-open.com/show/c97998ac7ecc1d3cb1dc27e8a78dc6e9.jpg" width="450" height="300" /></p> <p> <strong><a href="/misc/goto?guid=4958338177465881789" target="_blank">9. Fluid Baseline Grid</a></strong></p> <p> Fluid Baseline 网格系统是一个 HTML5 & CSS3 开发工具包，为网站快速设计提供了坚实的基础。</p> <p style="text-align:center;"><img alt="响应式 Web 设计必备的 12 款 CSS 框架" src="https://simg.open-open.com/show/328516ddef31888469fc6025935cde77.jpg" width="450" height="300" /></p> <p> <strong><a href="/misc/goto?guid=4958191193409561768" target="_blank">10. HTML5 Boilerplate</a></strong></p> <p> HTML5 Boilerplate 基于 HTML/CSS/JS 模板，可以帮助开发者使用 HTML5 技术快速开发稳健、功能齐全的网站。你可以把它当作自己的新项目模板，在此基础上建立自己的项目。</p> <p> 该模板包含了帮助开发 HTML5 站点和应用程序的组件和一些优秀的最佳实践，只需开发者最少的前期工作，就能为项目提供一个非常稳固的基础。另外，该模板是高度可定制，可轻松删除不需要的一些特性。</p> <p style="text-align:center;"><img alt="响应式 Web 设计必备的 12 款 CSS 框架" src="https://simg.open-open.com/show/19ae4624664a5806c5345560fd225c49.jpg" width="450" height="300" /></p> <p> <strong><a href="/misc/goto?guid=4958343751807087052" target="_blank">11. 320 and Up</a></strong></p> <p> 320 and Up 使用一个小型屏幕样式表，以防止移动设备加载桌面资源。其中样式表中包含了一些颜色、排版布局等设置属性。</p> <p style="text-align:center;"><img alt="响应式 Web 设计必备的 12 款 CSS 框架" src="https://simg.open-open.com/show/440e60242a9e258ba92e558d32aa0c1a.jpg" width="450" height="300" /></p> <p> <strong><a href="/misc/goto?guid=4958342745995950805" target="_blank">12. Amazium</a></strong></p> <p> Amazium 是一个基于 960 网格系统的响应式框架，使用 4 个主要的媒体查询来调整你的网站布局，以和设备屏幕相匹配。</p> <p style="text-align:center;"><img alt="响应式 Web 设计必备的 12 款 CSS 框架" src="https://simg.open-open.com/show/3fc9036732720041c8bc1daba56bcd88.jpg" width="450" height="300" /></p> <p> 原文： <a href="/misc/goto?guid=4958343753344814018" target="_blank">popular css frameworks for modern web layout design</a></p> <div id="come_from"> 来自: <a id="link_source2" href="/misc/goto?guid=4958343754138597875" target="_blank">www.iteye.com</a> </div>