在手机端浏览商品列表，开发人员懂得设计图片做正好的尺寸，那样浏览很好，但有人天生泛懒图片都是随手上传不管大小合适不合适，要求还是响应式的。今天就用jquery检测宽度，并赋值给高度来实现错位问题
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 14px/22px "Microsoft YaHei", arial, serif;
}
.menu-one li{
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(在不同的手机上显示的宽高都相同，避免了媒体查询的繁琐)
