移动流体布局和响应式布局总结
宽度与高度
区块宽度一般用max-width 最大宽度和百分比，来定义宽度，因为要实现自动缩放
高度如果要自适应，就不需要定义高度，或者定义最小高度
注意：横向的尽量用百分比，如边距等
图片自适应
保证小于图片分辨率的手机，自适应等宽屏幕
图片一定要能够自适应等比例缩放 才能保证布局的 正确性。
方法：将图片的img标签转换成区块，将最大宽度设置为100%，这样图片就会自适应了
img{ display: block; max-width: 100%; }
媒体查询
手机网站一般媒体查询都是控制字体大小
响应式网站，媒体查询要控制字体大小，和宽度高度，以及区块隐藏等
媒体查询是手机网站和自适应网站的重要部分，媒体查询可以根据不同的屏幕大小，做响应的处理，如文字的大小，区块隐藏等等
/*媒体查询，大于480小于640*/ @media (min-width:480px) and (max-width:640px) { #tour h2 { font-size: .26rem; } #tour h3 { font-size: .16rem; } #footer { font-size: .14rem; } } /*媒体查询，小于480*/ @media (max-width:480px) { #tour h2 { font-size: .18rem; } #tour h3 { font-size: .14rem; } #footer { font-size: .12rem; } }
原文：http://www.cnblogs.com/adc8868/p/6013228.html