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

Posted 2020-08-16 林贵秀

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

宽度与高度

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