响应式布局的相关文章

CSS3和Media Query的配合当下就能提供给响应式Web设计良好的支持,满足用户在open web的全新环境下为跨屏幕,跨设备的内容浏览需求。本文推荐了互联网比较热门的解读响应式布局的文章资源

响应式设计

响应式设计的开篇之作: 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