移动流体布局和响应式布局总结

宽度与高度

区块宽度一般用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;         }     }