在手机端浏览商品列表，开发人员懂得设计图片做正好的尺寸，那样浏览很好，但有人天生泛懒图片都是随手上传不管大小合适不合适，要求还是响应式的。今天就用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(在不同的手机上显示的宽高都相同，避免了媒体查询的繁琐)

jquery手机端产品列表响应式宽高检测宽度赋值给高度让宽高相同的更多相关文章

  1. jQuery手机端触摸卡片切换效果

    效果:http://hovertree.com/code/run/jquery/a1gr3gm9.html 可以用手机查看效果. 代码如下: <!doctype html> <htm ...

  2. jQuery手机端上拉刷新下拉加载更多页面

    基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  3. 使用 jQuery Deferred 和 Promise 创建响应式应用程序

    这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首 ...

  4. jquery手机端横屏判断方法

    jquery手机端横屏判断方法<pre>$(function() { var bodywidth = $('body').width(); var bodyheight = $('body ...

  5. Vue2手写源码---响应式数据的变化

    响应式数据变化 数据发生变化后,我们可以监听到这个数据的变化 (每一步后面的括号是表示在那个模块进行的操作) 手写简单的响应式数据的实现(对象属性劫持.深度属性劫持.数组函数劫持).模板转成 ast ...

  6. 谷歌Web中文开发手冊：3响应式

    https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsi ...

  7. 响应式网页中，如何只用CSS实现div的高和宽保持固定比例

    引言: 如果div里是<img>,原生就支持. .item img {     float: left;     margin:5%;     width: 20%; } >> ...

  8. Asp.net窄屏页面 手机端新闻列表

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchNotice.a ...

  9. chrome 手机端滑动列表的时候控制台会出现很多提示的解决办法

    问题: Unable to preventDefault inside passive event listener 可以加入touch-action 属性,具体参照MDN, https://deve ...

随机推荐

  1. Http 请求到后端过程

    描述下网页一个 Http 请求,到后端的整个请求过程 评注:基础题,感觉属于常识题!必会! 回答: 利用DNS进行域名解析 -------> 发起TCP的3次握手 --------> 建立 ...

  2. 线性表——顺序表的实现与讲解（C++描述）

    线性表 引言 新生安排体检,为了 便管理与统一数据,学校特地规定了排队的方式,即按照学号排队,谁在前谁在后,这都是规定好的,所以谁在谁不在,都是非常方便统计的,同学们就像被一条线(学号)联系起来了,这 ...

  3. 用pytorch1.0搭建简单的神经网络：进行回归分析

    搭建简单的神经网络:进行回归分析 import torch import torch.nn.functional as F # 包含激励函数 import matplotlib.pyplot as p ...

  4. SSRS Reporting Service安装与部署

    安装与部署SSRS步骤 什么是SSRS SQL Server Reporting Serivces(SSRS) 是一种强大的报表设计开发工具或者说是服务,它提供了一系列本地工具和服务,用于创建.部署和 ...

  5. Linux 安装部署 Redis

    一.Redis介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多 ...

  6. AVR单片机教程——闪烁LED

    上次我们把LED点亮了.你可能已经试过把 LED_RED 换成其他灯,也可能已经用 led_on() 把所有LED一起点亮了.但是LED点亮以后,程序就退出了,之后LED一直没有暗,直到没有供电.这一 ...

  7. littleFS在RT1052移植笔记

    环境:rt1052单片机+16G tf卡 为什么使用littleFS? NXP官方SDK支持! 先进的损耗平衡功能(wear leveling)可提供最长的快闪及内存寿命及最大的使用量.因为FALSH ...

  8. 【SoloPi】SoloPi使用4-功能使用，一机多控

    Soloπ是什么Soloπ是一个无线化.非侵入式的Android自动化工具,公测版拥有录制回放.性能测试.一机多控三项主要功能,能为测试开发人员节省宝贵时间. 一机多控功能Soloπ支持通过操作一台主 ...

  9. Vue.js 教程 -- 实例讲解

    一. Vue.js是什么 Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 ...

  10. Dubbo面试

    DUBBO原理.应用与面经总结 SPI 你是否了解SPI,讲一讲什么是SPI,为什么要使用SPI? SPI具体约定:当服务的提供者,提供了服务接口的一种实现之后,在jar包的META-INF/serv ...