一个简单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/