(11.2)--11.2学习响应式网页设计.pdf

《(11.2)--11.2学习响应式网页设计.pdf》由会员分享，可在线阅读，更多相关《(11.2)--11.2学习响应式网页设计.pdf（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、任务二：学习响应式网页设计响应式网站设计(Responsive Web design)于2010年5月由国外著名网页设计师Ethan Marcotte所提出，其理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。1响应式网页设计的优势具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，网站页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端而不是为每个

2、终端做一个特定的版本。这样，设计师就可以不必为不断到来的新设备做专门的版本设计和开发了。2响应式网页设计的理念Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美、直观并且高效的web设计工具包，可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件，栅格系统以及一些常用的JavaScript插件。3发展趋势及主流开发框架 Fbootstrapp BootMetro Kickstrap Foundation GroundworkCSS Gumby HTML KickStart IVORY Kube3发展趋势及主流开发框架Vue.js,前端框架三大巨头之一

3、，国人尤雨溪开发出来的一款框架,火遍全球,全世界很多人都在用。响应式设计几乎是现代网站的标配，开发者搭建好网站之后若是要测试其响应式的变化效果，需要大量的测试设备来确保网页显示不会出问题，可是拿大量的实际设备来测试并不现实。在这种需求之下，催生了许多实用而可靠的响应式网站测试工具。4主流的响应式网站测试工具1.Responsive Design Bookmarklet2.resizeMyBrowser3.The Responsive Calculator4.Responsinator5.Respondr6.Designmodo Responsive Test7.responsivepx8.Screenfly9.Viewport Resizer4主流的响应式网站测试工具THANKS