jquery手机端产品列表响应式宽高检测宽度赋值给高度让宽高相同

最新推荐文章于 2024-07-20 23:54:17 发布

weixin_30649641

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量101

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/li-sir/p/7366007.html

版权

在手机端浏览商品列表，开发人员懂得设计图片做正好的尺寸，那样浏览很好，但有人天生泛懒图片都是随手上传不管大小合适不合适，要求还是响应式的。今天就用jquery检测宽度，并赋值给高度来实现错位问题

<style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            font: 14px/22px "Microsoft YaHei", arial, serif;
        }
        .menu-one li{
            width:33.33333333%;
            float: left;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="content">
    <ul class="menu-one">
        <li class="" style="background: #ddd;"></li>
        <li class="" style="background: #eee;"></li>
        <li class="" style="background: #d0fc68;"></li>
        <li class="" style="background: #999;"></li>
        <li class="" style="background: #222;"></li>
        <li class="" style="background: #b2542c;"></li>
        <li class="" style="background: #1b1fee;"></li>
    </ul>
</div>
<script>
　　/* ps(两个都能检测赋值，看你自己的了) */
    $(document).ready(function () {
        var wid = $(".menu-one li").width();
        alert(wid);
        $(".menu-one li").height(wid);

       /* for(var i=0;i<$('.menu-one li').length;i++){
            var width = $('ul li').eq(i).width();
            $('.menu-one li').eq(i).height(width);
        }*/

    });
</script>

没写jquery的样式，添加高度%是不行的，只有写px,em,rem等具体高度才可以，但又有客户需要响应式的在不同手机端都要宽高一样，用媒体查询比较麻烦，所以想到了jquery



最后结果：ps(在不同的手机上显示的宽高都相同，避免了媒体查询的繁琐)

转载于:https://www.cnblogs.com/li-sir/p/7366007.html

weixin_30649641

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery手机端产品列表响应式宽高检测宽度赋值给高度让宽高相同

在手机端浏览商品列表，开发人员懂得设计图片做正好的尺寸，那样浏览很好，但有人天生泛懒图片都是随手上传不管大小合适不合适，要求还是响应式的。今天就用jquery检测宽度，并赋值给高度来实现错位问题<style> * { margin: 0; padding: 0; } body { ...
复制链接

扫一扫