• 列表的响应式排版


    效果展示:

         

    一、每行固定个数:保证排版的美观

    .list li{
    	20%;display:inline-block;
    	*display:inline;*zoom:1;overflow:hidden;
    }
    

    二、随页面宽度调整个数和大小:保证图文的可读性

    .list li{
    20%;display:inline-block;
    *display:inline;*zoom:1;overflow:hidden;
    }
    

    1、媒体查询控制宽度

    @media screen and (max-1280px){
        .list-table1 li{width:25%}
    }
    
    @media screen and (max-600px){
        .list-table1 li{width:33.3%}
    }
    
    @media screen and (max-400px){
        .list-table1 li{width:50%}
    }

    方便、但存在兼容性

    2、JS控制

    $(window).resize(function () {
        resizeList();
    
    })
    
    function resizeList(){
        var s_width=$(window).width();
            //console.log("s_width:"+s_width);
            if(s_width>600 && s_width <=1280)
            {
                $(".list-table1 li").css("width","25%");
            }else if(s_width>400 && s_width <=600){
                $(".list-table1 li").css("width","33.3%");
            }else if(s_width>200 && s_width <=400){
                $(".list-table1 li").css("width","50%");
            }else if(s_width<=200){
                 $(".list-table1 li").css("width","100%");
            }
    }
    $(window).resize()实时获取浏览器的宽度

    注意事项:

    1、图片不变形

    .a-common{width:auto;height:auto;}
    .a-common img{width:100%;height:auto;}

    2、文字溢出处理

    .title, .subtitle{
    width:auto;text-align:center;
    overflow:hidden;white-space:nowrap;
    text-overflow:ellipsis;
    }
  • 相关阅读:
    MaaS系统概述
    流处理认识
    事务补偿
    Hystrix原理与实战
    RPC概念和框架
    git remote: error: hook declined to update
    Unity CombineTexture
    Windows Powershell统计代码行数
    unity面试题二
    unity面试题一
  • 原文地址:https://www.cnblogs.com/chaoli/p/5828662.html
Copyright © 2020-2023  润新知