序：通常我们只能控制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. NYOJ-32 组合数 AC 分类： NYOJ 2013-12-30 07:42 189人阅读 评论(0) 收藏

    #include<stdio.h> int num[100]; int pnum(int n,int v); int mv=0; int main(){ int n,v; scanf(&q ...

  2. 聊一聊js中的null、undefined与NaN

    零.寒暄 翻翻自己的博客,上一篇竟然是六月26号的,说好的更新呢?回顾刚刚过去的这个七月,整天都是公司的入职培训加上自己的小论文,每天奋战到凌晨1点多,这是要挂的节奏啊!但是不论怎么说,自己的时间管理 ...

  3. 引擎设计跟踪(九.14.2d) [翻译] shader的跨平台方案之2014

    Origin: http://aras-p.info/blog/2014/03/28/cross-platform-shaders-in-2014/ 简译 translation: 作者在2012年写 ...

  4. C++引用变量（转）

    引用变量 c++中引用变量的使用: 定义: int rate=80; int  & pt=rate 1.pt 是引用变量,申明引用变量时必须将其初始化.pt 和rate 的值指向相同的内存变量 ...

  5. System.getProperty()参数

    java.version Java 运行时环境版本 java.vendor Java 运行时环境供应商 java.vendor.url Java 供应商的 URL java.home Java 安装目 ...

  6. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  7. js 异步请求封装

    1. function ajax(url, onsuccess) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ...

  8. Shell练习 行列转换

    原题:https://leetcode.com/problems/transpose-file/Given a text file file.txt, transpose its content. Y ...

  9. Android核心分析之二十Android应用程序框架之无边界设计意图

    Android应用程序框架1 无边界设计理念 Android的应用框架的外特性空间的描述在SDK文档(http://androidappdocs.appspot.com/guide/topics/fu ...

  10. sqlmap 使用举例

    详细的请见: http://drops.wooyun.org/tips/143 http://wenku.baidu.com/link?url=45xj6EVVWQjV8upwrBAMIqPP3xMc ...