一个简单demo让你明白真正的‘响应式设计、em、文字图标svg’
大多数网站所谓的响应式设计，只是在不同大小屏幕上能正常显示罢了，在大屏幕上显示全部页面，在小屏幕上隐藏一部分不重要的页面，这样的响应式设计只是为了兼容pc和移动，但在移动上的效果却是很不理想的，隐藏掉的页面内容虽然不能看到，但却同页面一起加载，浪费资源流量，想想那蛋疼的3G能访问这样的响应式网页吗！
你见过一个网页在不同屏幕上是“等比缩小、等比放大”的响应设计吗？不管是文字大小，图片大小，所有的一切都是等比的！请不要惊讶，其实这只是一点雕虫小技，但作为一个前端工程这必须是基础知识了，首先点击下面demo试试吧，拖动浏览器大小测试一下：
http://html5css3webapp.com/zw-dome/responsive/
响应设计css：我设置每100px屏幕宽度变化就给body一个相对应的em值，body是顶层节点，子节点继承相应的em值改变大小。
@media screen and (min-width: 1601px){ body{ font-size:2.2em} } @media screen and (min-width: 1501px) and (max-width: 1600px){ body{ font-size:2.1em} } @media screen and (min-width: 1401px) and (max-width: 1500px){ body{ font-size:2em} } @media screen and (min-width: 1301px) and (max-width: 1400px){ body{ font-size:1.9em} } @media screen and (min-width: 1201px) and (max-width: 1300px){ body{ font-size:1.8em} } @media screen and (min-width: 1101px) and (max-width: 1200px){ body{ font-size:1.7em} } @media screen and (min-width: 1001px) and (max-width: 1100px){ body{ font-size:1.6em} } @media screen and (min-width: 901px) and (max-width: 1000px){ body{ font-size:1.5em} } @media screen and (min-width: 801px) and (max-width: 900px){ body{ font-size:1.4em} } @media screen and (min-width: 701px) and (max-width: 800px){ body{ font-size:1.3em} } @media screen and (min-width: 601px) and (max-width: 700px){ body{ font-size:1.2em} } @media screen and (min-width: 501px) and (max-width: 600px){ body{ font-size:1.1em} } @media screen and (min-width: 401px) and (max-width: 500px){ body{ font-size:1em} } @media screen and (min-width: 301px) and (max-width: 400px){ body{ font-size:0.9em} } @media screen and (min-width: 201px) and (max-width: 300px){ body{ font-size:0.8em} } @media screen and (min-width: 101px) and (max-width: 200px){ body{ font-size:0.7em} } @media screen and (min-width: 1px) and (max-width: 100px){ body{ font-size:0.6em} }
页面css：
h1{ margin:0; padding:0} .zw{ display:block; width:100%; font-size:6em; color:#333; text-align:center; text-decoration:none} .zw span{ cursor:pointer; color:#063} .zw span:hover{ color:#C00} .p{ font-size:0.8em; color:#093; text-align:center; margin:0; padding:0; font-family:"微软雅黑", "黑体", "宋体"} .ul{ margin:1em 3%; padding:0; width:94%; border:.15em solid #ededed; list-style-type:none; border-radius:1em; background:#fff} .ul li{ margin:0; padding:0} .ul li a{ display:block; width:100%; line-height:2.5em; font-size:1.2em; color:#999; text-decoration:none; border-top:.15em solid #ededed} .ul li:first-child a{ border-top:none; border-radius:0.833em 0.833em 0 0} .ul li:last-child a{ border-radius:0 0 0.833em 0.833em} .ul li a:hover{ background:#063; color:#fff} .ul li a i{ margin:0 .8em}
要做到整个页面等比响应式，必须得所有关于大小的单位都用em代替px，或者百分比代替px
图片都是用文字图标实现，文字图标制作地址：http://www.flaticon.com/
