响应式Web设计(HTML5和CSS3)工具集

响应式设计的开篇之作:
http://www.alistapart.com/articles/responsive-web-design/

响应式图片方案:http://filamentgroup.com/lab/responsiveimagesexperimentingwithcontextawareimage_sizing/

自适应图片方案:
http://adaptive-images.com

What size is my viewport page?:
http://benfrain.com/easily-display-the-viewport-size-of-your-page-for-responsive-designs/

Respond.JS
https://github.com/scottjehl/Respond

Modernizr:
http://www.modernizr.com

Webshims Lib:
http://afarkas.github.com/webshim/demos/

FitVids插件:
http://fitvidsjs.com/

浏览器特性支持列表:
http://caniuse.com

HTML5-Cross-browser-Polyfills:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Responsive Menu:
https://github.com/mattkersley/Responsive-Menu

浏览器插件

Microsoft Internet Explorer Developer Toolbar:http://www.microsoft.com/download/en/details.aspx?id=18359

ResizeMe(for safari):
http://web.me.com/aaronholla/Safari_Extensions/ResizeMe.html

Resize(for safari):
http://resizeSafari.com

Firesizer(for firefox):
https://addons.mozilla.org/en-US/firefox/addon/firesizer/

Windows Resizer(for chrome):https://chrome.google.com/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh

HTML5

W3C的HTML5验证工具:
http://validator.w3.org/

HTML5验证工具:
http://validator.nu

html5-enabling-script :
http://remysharp.com/2009/01/07/html5-enabling-script/

HTML5样板文件:
http://html5boilerplate.com/

HTML5大纲生成器:
http://gsnedders.html5.org/outliner/

HTML5大纲生成器:
http://hoyois.github.com/html5outliner/

畅游HTML5:
http://diveintohtml5.info
http://diveintohtml5.com/

CSS

Eric Meyer’s reset css :
http://meyerweb.com/eric/tools/css/reset/

normalize.css:
http://necolas.github.com/normalize.css/

-prefix-free:
http://leaverou.github.com/prefixfree/

css3渐变生成器:
http://www.colorzilla.com/gradient-editor/

css3背景渐变模式:
http://lea.verou.me/css3patterns/

SASS:
http://sass-lang.com

LESS:
http://lesscss.org

贝赛尔曲线工具:
http://cubic-bezier.com/

矩阵变形工具:
http://www.useragentman.com/matrix/

响应式CSS框架

Semantic:
http://semantic.gs

Skeleton:
http://getskeleton.com

Less Framework:
http://lessframework.com

1140 CSS Grid :
http://cssgrid.net

Columnal :
http://www.columnal.com

字体/图标

sIFR:
http://www.mikeindustries.com/blog/sifr/

Cufón:
http://cufon.shoqolate.com/generate/

google web font:
http://www.google.com/webfonts

Font Squirrel:
http://www.fontsquirrel.com

Typekit:
http://www.typekit.com

Font Deck:
http://www.fontdeck.com

Fico字体图标:
http://fico.lensco.be/

其他

IE Tester:
http://www.my-debugbar.com/wiki/IETester/HomePage

非可视桌面阅读器(NVDA):
http://www.nvda-project.org/

响应式Web设计(HTML5和CSS3)范例网站

http://thinkvitamin.com/

http://2011.dconstruct.org/

http://mediaqueri.es

http://www.panic.com/blog/

http://demo.marcofolio.net/3d_animation_css3

http://designlovr.com/examples/dynamic_stack_of_index_cards/

http://www.andthewinnerisnt.com/

http://css-tricks.com

http://webdesignerwall.com/trends/47-amazing-css3-animation-demos

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值