响应式web设计：
1.传统技术：
1.1 流式布局。 应对窗口大小缩放的最简单的方案，就是做一个等比缩放布局。等比缩放布局又称为流式布局。就是将网页分成几栏，然后用比例而非像素设定它们的宽度。不能有margin，有了margin，计算就不简单了。一定要有margin，那么margin也要用百分比。
css3的box-sizing：border-box属性 和calc(67%-5px)函数。
1.2 流式图片
要实现响应式布局，构建多栏等比缩放的布局是第一步。第二步是处理栏中的内容。其中一个问题就是图片。img{max-width:100%},要么是实际大小，要么是其父容器的最大宽度。如果想给图片周围加上一点外边距，必须给margin-left 和margin-right设定百分比值，而且要保证max-width等于100%（不能超），还有字体。
流式图片这个方法的不足：那就是无论显示的时候多小，浏览器都必须下载完整的大图片。这样会浪费一些时间和带宽，移动设备对此比较敏感。可惜CSS本身没有办法解决这个问题。有解决方案，但是要用到服务器端代码、We题b服务和javascript库。对于类似但更严重的视频缩放问题，我们还是有原生方案的。
1.3 排版工作–流式字体
不要使用像素点或点这样的固定度量单位，而要使用百分比或em等相对单位。边框、外边距、内边距也可以使用em做单位。使用em 的效果会更棒。注意：对大多数布局而言，使用em单位设定边框、内边距和外边距，最大的好处是可以防止元素在小窗口里显示的过大，或者说在移动设备的小屏幕上显得太过突兀。css3引入了rem，永远是相对root求值，em在多级嵌套的时候是相对直接父级元素的。
排版工作不仅仅是设置文字大小。要保证各种屏幕上的可读性，还要考虑行长 行高 外边距，甚至要使用多栏分隔文本。普通的流式布局和比例缩放很难解决上述这些问题。
所以出现了媒体查询。
<body>
<div class="left"></div>
<div class="right"></div>
</body>
css:
body{margin:0}
.left{width:20%;float:left;}
.right{width:80%;float:right}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
