史上较全的响应式设计资源库

响应式设计起源：虎网科技（西安网站制作）在2010年写了一篇响应式的文章，宣扬这种新式的网页设计思想，经过3年的发展，响应式设计得到了众多设计师的承认。

本文的目的在于虎网科技（西安网站制作）为大家集中推荐一些较有价值的响应式设计资源。包含了CSS框架、在线工具、准备阶段的工具等等。

CSS 响应式框架

这一部分主要介绍了一些较新的CSS响应式框架，更轻量，而且兼容性也不差。（Foundation，Skeleton是较为老式的CSS响应式框架）

Girder
Girder 使用了Sass silent classes (占位符，输出时不会体现)在HTML中组织内容，标记能够额外处理一些表象类（presentational classes ），比如 “unit_1of4″, “small-2″, “grid4″.

Cardinal
Cardinal 是一个小型的、以”移动优先”为理念的CSS框架，默认样式很实用。灵活的字体和响应式的栅格线系统。

Typeplate
Typeplate是一款”排版初学者工具”. 一款简约的Sass/CSS库，能够采用合适的手段处理作品。

Furatto
Furatto 基于Sass，包含了JS插件，在Coffeescript中开发的，因此很容易阅读。交互性很强，支持多种设备。

Kraken
轻量、移动优先为理念的模板，适合前端开发者。

Gridism
Gridism 是一款简约的响应式栅格线系统，非常好用。

Sassaparilla
Sassaparilla 使用了Sass以及Compass技术，让响应式网页设计变得简单。注重于更好的版式布局，打造良好的阅读节奏。让编译更加轻松。

Cool Kitten
Cool Kitten是一款滚动视差响应式框架（个人较爱）

Responsive Boilerplate
Responsive Boilerplate 极度简约、非常轻量(2kb)的CSS栅格框架。易懂易用。

Javascript 响应式插件

这些脚本要么是一小段代码，要么是几个文件，能够实现网页设计作品的响应式。大部分自动注释，因此很方便使用。

Responsive elements
Responsive Elements 小型JS库，能够轻松实现元素的响应式。

jPanelMenu
jPanelMenu 是一款jQuery插件，由一款面板式的菜单创建。CSS动画更好的实现。

SelectNav.js
SelectNav 是一款JS插件，能够将网站的导航栏转换为可选择的下拉菜单。结合了Media Queries，能为移动设备节约空间。

Adapt.js
Adapt.js 轻量级JS文件，在浏览器载入页面前，能够根据宽度，智能判定并载入CSS文件。

Masonry
Masonry 是一款先进的jQuery插件，能够打造动态、适应性的布局。能够帮助重新排列元素。

RoyalSlider ($12)
RoyalSlider 是一款很好用的jQuery图库或内容滚动插件，动效、响应式布局、支持触控，很适合移动端。无论是滚动栏、幻灯片窗还是内容滚动栏、图库、视频库都能用其实现。

UberMenu – WordPress ($16)
UberMenu 是一款非常友好的、高度定制化的、响应式的 Mega Menu WordPress插件。

Responsive Pricing Tables – WordPress ($15)
CSS3 Responsive Web Pricing Tables Grids For WordPress CSS3 价格表，两种价格表样式，20种可选颜色，可选项丰富。

响应式设计——导航篇

响应式设计中较难的部分大概就是导航了。即便你的导航菜单占地很小，但是移动端的设计依然很困难。传统的网页设计总是把导航菜单放在页顶，以便用户浏览。而响应式设计中，情况很复杂。这一环节，将推荐几种不错的解决方案。

Responsive menu patterns

A Responsive Design Approach for Navigation (文章)

Flexnav
FlexNav 是一款使用Media Queries和JS实现的多级菜单，支持触控、悬停。符合”移动优先”理念。

Naver
Naver一款面向响应式导航的jQuery插件

Navigataur
Navigataur 是一款简约的工具，帮助实现响应式导航菜单。

响应式设计——图像

如何根据浏览器尺寸、加载速度选择图片尺寸？

CSS Fluid Image Techniques for Responsive Site Design (Article)
Dudley Storey 创作的一篇先进文章，阐述了该要如何打造”伸缩自如”的图像

Clown Car Technique for Responsive Images
Estelle Weyl, 写了一篇关于可缩放矢量图形(SVG)的文章，生动有趣。

Responsive Img
Responsive Img 是一款jQuery插件，能够变换图像的src属性，主要根据的是容器的宽度。

响应式设计工具

See your site responsive

Viewport Resizer
Viewport Resizer 是一款在线工具能够测试网页设计是否符合响应式设计的标准。

Screenqueri.es
Screenqueri.es 是一款细腻的响应式测试工具。能够在30多种不同的设备上展示你的网页设计。

Responsive Web CSS
Responsive Web CSS 让响应式网页布局变得轻松。只需要添加p，设置一下不同设备上的大小即可。

注意：本文肯定会有所遗漏，如果你有什么好资源，请推荐给虎网科技（西安网站制作）哟！

     以上内容由虎网科技（西安网站建设,西安网站制作）为您提供，更多精彩内容：https://www.huwz.com/

关注“虎网科技”微信公众号，快速获取互联网较新资讯

网站建设技术并不难，把握学习方向是重点

    在这个互联网信息大数据背景下，很多企业与个人都会参与网站建设打造属于自己的网站，一般人一提起网站建设，就会想到编程、代码以及网站建设相关的web技术，而作为一门新兴技术，网站建设的技术并不难，重点是把握学习方向，那么该怎样把握学习的方向呢，下面从网站建设技术中常见基础的开始说起。 　　首先是从网站代码语言方向着手学习，网站建设所用到的语言是比较简单的语言，从基础的html语言，到早期的asp语言...

       简单五步为您搭建优质网站 在今天，很多的企业都不想被互联网所淘汰，都希望能够一直利于不败之地，所以纷纷的开始搭建网站，都希望自己的网站是较好的，能够完胜同行企业，一直为位居百度之首。的确一个好的网站能够为企业塑造良好的品牌形象、达成交易利润。但如今互联网上有那么多的网站，如何才能搭建一个成功优质的网站，完胜同行企业呐？今天， 天津网站建设 - 虎网科技 的小编来为您支招啦！只需做好如下五点，即可搭建优质网站。 　　 一、...

       为什么网站优化价格可能远高于网站建设价格  西安网站优化方案的价格通常在1－10万元之间，有些小型企业网站建设的价格往往才几千元，为什么网站“优化一下”的价格比建设一个网站还要贵很多？这是许多中小企业网站问到的问题。 一个真正优化的网站，投入的费用可能比建设一个新网站更多，这一点也不奇怪，建设网站可能有通用的建站模版，而搜索优化则需要针对每个网站的具体情况进行专门设计，要对原有的不规范的程序进行大量的修改，需要对网站结构和每个栏目每...

       沧州盐山振祥工业设备跟虎网科技签定网站建设协议 振祥在沧州市盐山县县城南开发区。振祥是经沧州市盐山县工商局审核的正规企业，统一社会信用代码：办理中。振祥选用虎网站网络实用型网站案例，此案例比经济型多了些功能，如动漫广告图片、在线客服QQ/MSN等聊天工具、顶部侧部二级分类导航、走马灯等功能。 　　虎网站根据客户不同要求，可承担钢质管道的单层和双层熔结环氧粉末(FBE)、双层聚乙烯（2PE）、三层聚乙烯（3PE）、双层聚丙烯（2PP）、三层聚丙烯...

       做网站的核心原则有哪些？ 公司想要实行网络销售，首先要进行做网站，但是一个网站的好坏是至关重要的，这直接会影响公司网站的浏览量跟销售量。所以我们应该从多方面来考虑设计网站，不能只关注它的外观好就可以吸引顾客，因为那只是暂时的。首先主要需要的是内容，网站能够提供客户所需要的内容，才能够留住客户。还有其他的因素都会影响做网站的。所以我们应该拥有几个核心原则来促进我们的做网站。 第一、以产品为核心原则 做网站也是为了宣传公司的产...

       广州天河天地日盛装饰设计与虎网科技签署网站建设协议 天地日盛位于广州市天河区棠安路288-298号首层、二层局部2045房。天地日盛选用虎网站经济型入门级网站案例，其功能比较简单的程序，广告单图(无动漫)，页面较简单，适合小微企业产品展示型网站。天地日盛是经广州市天河区工商局审核的有资质公司，统一社会信用代码：91440101MA59UK6J6D。 　　广州天地日盛装饰设计工程有限公司是一家家居产业化，服务标准化，运营规范化，集基材、主材、家具、家...