zoukankan      html  css  js  c++  java
  • 第九十五节,移动流体布局和响应式布局总结

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

    宽度与高度

    区块宽度一般用max-width 最大宽度和百分比,来定义宽度,因为要实现自动缩放

    高度如果要自适应,就不需要定义高度,或者定义最小高度

    注意:横向的尽量用百分比,如边距等

    图片自适应

    保证小于图片分辨率的手机,自适应等宽屏幕

    图片一定要能够自适应等比例缩放 才能保证布局的 正确性。

    方法:将图片的img标签转换成区块,将最大宽度设置为100%,这样图片就会自适应了

    img{
        display: block;
        max-width: 100%;
    }

    媒体查询

    手机网站一般媒体查询都是控制字体大小

    响应式网站,媒体查询要控制字体大小,和宽度高度,以及区块隐藏等

    媒体查询是手机网站和自适应网站的重要部分,媒体查询可以根据不同的屏幕大小,做响应的处理,如文字的大小,区块隐藏等等

        /*媒体查询,大于480小于640*/ 
        @media (min-480px) and (max-640px) { 
            #tour h2 { 
                font-size: .26rem; 
            } 
            #tour h3 { 
                font-size: .16rem; 
            } 
            #footer { 
                font-size: .14rem; 
            } 
        } 
    
        /*媒体查询,小于480*/ 
        @media (max-480px) { 
            #tour h2 { 
                font-size: .18rem; 
            } 
            #tour h3 { 
                font-size: .14rem; 
            } 
            #footer { 
                font-size: .12rem; 
            } 
        } 
  • 相关阅读:
    Linux上安装Tomcat
    SQLServer2008 关于while循环
    [转]接口和抽象类
    windows 装XP系统
    SQLServer2008 表与表之间的数据导入
    问题消灭机
    报错。。。。。。。。。。
    疑问...........
    SQLServer In和Exists
    struts2 访问一个action的时候出现多次重复访问问题(2次或者3次)
  • 原文地址:https://www.cnblogs.com/adc8868/p/6013228.html
Copyright © 2011-2022 走看看