第九十五节，移动流体布局和响应式布局总结

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

宽度与高度

区块宽度通常用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; 
        } 
    }