首页 > 代码库 > 第九十五节,移动流体布局和响应式布局总结

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

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

宽度与高度

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

 

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