序：通常我们只能控制div的宽度 而不能控制高度，在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度相同 成为一个正方形 甚至任何你想要比例

一，背景：目前移动端大多数图片或视频列表页面的显示，列出几个

可以看出这几个页面都有一个共同点 都有图片 双列 列表单个模块的高度相同  我查看了下他们的源码 都是将图片设置为固定高度 然后将li撑开 li的宽度设置为50% 然后float：left 然后用媒体查询使之响应

二 探索

于是我在想 怎么能先设置好li的宽高度 不由图片来控制呢 但是这就存在个问题 我们只能用百分比来设置宽度 高度还是要写死 这依然没有意义 还是要用到媒体查询来更改高度

于是我想到了getComputedStyle 这个属性 他是通过后期计算得出页面上某个元素的样式 那么这样 我们就可以 先设置好宽度 比如50% 然后通过getComputedStyle 获取这个宽度 然后赋值给这个元素的高度

这就成了一个正方形。下来实战一把

三 实战

我们的目的是：双列居中显示正方形 且跟随分辨率大小或浏览器大小等比缩放

1.搭个html框架

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

    <meta content="yes"name="apple-mobile-web-app-capable"/>

    <meta content="black"name="apple-mobile-web-app-status-bar-style"/>

    <meta name="format-detection"content="telphone=no"/>

    <link rel="stylesheet" href="css/style.css">

    <title>html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计</title>

</head>

 <body>

  <div class="test">

    <ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

  </div>

 <scirpt src="js/zepto.js"></script>
</body>

</html>

2. css

*{ margin: 0; padding: 0;}

.test{ width: 100%; }

ul{ width:96%; margin: auto;}

ul:after{ content: "."; visibility: hidden; height: 0; clear: both; display: block;}

ul li{ width: 49%;  margin-top: 10px; background: rgb(230,34,57); list-style: none;}

ul li:nth-child(even){ float: left;}

ul li:nth-child(odd){ float: right;}

css 让li的奇数左浮动 偶数右浮动 达到居中的效果 这样可以不用使用margin 因为margin可能会不准 等分最好的方式是flex 但我们这里只考虑双列所以不用flex

3.js

先要写一个获取计算后的样式的函数

function getComStyle(elem, style) {

    var node = document.getElementsByTagName(elem)[0];

    var theStyle;

    if (window.getComputedStyle) { //如果window有getComputedStyle这个属性

        var styleObj = window.getComputedStyle(node, null); //第二个参数是获取伪元素的样式 设置null就是不获取 styleObj是一个包含各种样式属性的对象

        theStyle = styleObj.getPropertyValue(style); //getPropertyValue获取元素css指定的属性值

    } else { //ie

        theStyle = node.currentStyle;

    }

    return theStyle;

}

这里的两个参数分别代表 想要获取样式元素 style是你想要获取的样式 比如我们此刻想获取的是width

接下来我们写主函数设置

$(function(){

    var width = getComStyle("li", "width");

    $(".test ul li").height(width);

})

效果perfect 我们没有设置li的高度 但是现在 他已经有高度了 li成了一个正方形

但是 出了一个问题 当我改变浏览器的宽度时 他的高度并没有响应

这不是我想要的结果 仔细想 因为当浏览器的宽度改变了 必须要有监听才能使之做出响应的改变 于是想到了 resize 这个函数是当window窗口发生改变时触发

$(window).resize(function(){

    var width = getComStyle("li", "width");

     $(".test ul li").height(width);

})

这下好了 浏览器的宽度改变时 我们依然可以获取宽度 并赋值给高度

四  发散

既然我们可以让他成为正方形当然也可以让他成为长方形 或者任何我们想要的方形 于是我们再写一个可以控制高度的函数

function controlH(width,n,ele){

    newW=parseInt(width.replace("px",""));

    var height=newW*n;

    $(ele).height(height);

}

这三个参数分别为 获取元素的宽度width， 想要设置高度为宽的倍数n ，元素ele

完整的js

 var i = 0;

//主函数

 $(function() {

     var width = getComStyle("li", "width");

     $(".test ul li").height(width);

     controlH(width, 0.8, "li");

 })

//窗口改变时触发

 $(window).resize(function() {

     var width = getComStyle("li", "width");

     i++

     controlH(width, 0.8, "li");

     console.log(i);

 })

//获取元素宽度

 function getComStyle(elem, style) {

     var node = document.getElementsByTagName(elem)[0];

     var theStyle;

     if (window.getComputedStyle) {

         var styleObj = window.getComputedStyle(node, null);

         theStyle = styleObj.getPropertyValue(style);

     } else { //ie

         theStyle = node.currentStyle;

     }

     return theStyle;

 }

//设置元素高度

 function controlH(width, n, ele) {

     newW = parseInt(width.replace("px", ""));

     var height = newW * n;

     $(ele).height(height);

 }
controlH(width, 0.8, "li")情况下的页面显示


controlH(width, 1, "li") 页面显示


controlH(width, 1.5, "li") 页面显示

html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计的更多相关文章

  1. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

  2. HTML5+CSS3的响应式网页设计：自动适应屏幕宽度

    这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...

  3. HTML5、CSS3与响应式Web设计入门(2)

    HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...

  4. html5 + css3 + jQuery + 响应式布局设计

    1. [代码][HTML]代码     <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...

  5. <HTML5和CSS3响应式WEB设计指南>译者序

    "不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

  6. HTML5入门教程：响应式页面布局

    摘自:https://www.sohu.com/a/225633935_647584 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...

  7. HTML5、CSS3与响应式Web设计入门(1)

    HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野.HTML5本身就是一个很 ...

  8. 【01】《响应式Web设计：HTML5和CSS3实战》

    [01]   (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(全).pdf 共246页.   2013年1月出版.   读后感:适合入门的书籍,对于响应式布局, ...

  9. 《响应式Web设计—HTML5和CSS3实战》 学习记录

    作者:Ben Frain 学习时间   2016/5/12 第一章   设计入门 *视口调试工具 IE:Microsoft Internet Explorer Develop Toolbar Safa ...

随机推荐

  1. shell编程之环境变量

    在shell编程里我们首先接触到的是环境变量,常用命令说明 1. 使用echo命令查看单个环境变量.例如: echo $PATH 2. 使用env查看所有环境变量.例如: env 3. 使用set查看 ...

  2. 浅谈MySQL索引背后的数据结构及算法【转】

    摘要 本文以MySQL数据库为研究对象,讨论与数据库索引相关的一些话题.特别需要说明的是,MySQL支持诸多存储引擎,而各种存储引擎对索引的支持也各不相同,因此MySQL数据库支持多种索引类型,如BT ...

  3. linux shell的输出效果修改方法(界面颜色)

    文本终端的颜色可以使用“ANSI非常规字符序列”来生成.举例: echo -e "\033[44;37;5m ME \033[0m COOL" 以上命令设置背景成为蓝色,前景白色, ...

  4. Android的事件处理机制（一）------基于回调机制的事件处理

    Android平台的事件处理机制有两种,一种是基于回调机制的,一种是基于监听接口的,现介绍第一种:基于回调机制的事件处理.Android平台中,每个View都有自己的处理事件的回调方法,开发人员可以通 ...

  5. dd大牛的《背包九讲》

    P01: 01背包问题 题目 有N件物品和一个容量为V的背包.第i件物品的费用是c[i],价值是w[i].求解将哪些物品装入背包可使这些物品的费用总和不超过背包容量,且价值总和最大. 基本思路 这是最 ...

  6. SVN用法（merge,branch,switch）

    SVN merge命令用法 使用svn的merge命令,把一个版本的变化合并到另一个版本.我使用的tortoise,在当前的工作目录点击右键,选择merge,在from框输入源url,在revisio ...

  7. hdu 4618(最大回文子矩阵)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4618 昨天多校的一道题,说多了都是泪啊,为了一道图论题,磨了那么久,结果是别的题都没看,没办法,补呗. ...

  8. poj 3522(最小生成树应用)

    题目链接:http://poj.org/problem?id=3522思路:题目要求最小生成树中最大边与最小边的最小差值,由于数据不是很大,我们可以枚举最小生成树的最小边,然后kruskal求最小生成 ...

  9. 540C： Ice Cave

    题目链接 题意: n*m的地图,'X'表示有裂痕的冰块,'.'表示完整的冰块,有裂痕的冰块再被踩一次就会碎掉,完整的冰块被踩一次会变成有裂痕的冰块, 现在告诉起点和终点,问从起点能否走到终点并且使终点 ...

  10. ps -ef能列出进程号，和端口号没任何关系

    1.ps -ef显示所有进程ID 2.netstat才显示端口号情况