html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计-阿里云开发者社区

开发者社区> frontman> 正文

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

简介: 序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度相同 成为一个正方形 甚至任何你想要比例 一,背景:目前移动端大多数图片或视频列表页面的显示,列出...
+关注继续查看

通常我们只能控制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") 页面显示

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
PageSpeed Insights: Google推出的优化移动页面渲染速度的开源工具
Google有一款开源的PageSpeed Insights,可以帮助网站管理员们优化其移动页面的渲染性能。 据Google的统计,今日的移动页面,其平均再加时间竟然超过了7秒钟。移动性能是在不断改善,但在变得更快的目标上,还有很长的路要走。
19 0
《LabVIEW 虚拟仪器程序设计从入门到精通(第二版)》一导读
LabVIEW 虚拟仪器程序设计从入门到精通(第二版) 虚拟仪器是当前测控领域的技术热点,它代表了未来仪器技术的发展方向,LabVIEW是一款优秀的虚拟仪器软件开发平台。目前,LabVIEW在中国的测试技术及教育领域内得到很大的应用。
1265 0
【前台】【单页跳转】整个项目实现单页面跳转,抛弃iframe
即如下: 【想做到点击nav侧边栏,仅替换右边div中的内容,而不是跳转到新的页面,这样的话,其实整个项目中就只有一个完整的页面,其他的页面均只写内的部分即可,或者仅仅写要替换的内的部分即可!!】 index.
1173 0
html5 touch事件实现触屏页面上下滑动(一)
最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件。想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是介绍touch事件或者很简短的小demo。
690 0
关于html5与jsp页面同样的html代码展示的页面效果不一样的问题
原文: 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题 html5默认的声明为 jsp默认的声明头部为 这里就不一样了,如果两个页面写同样的html代码及样式,jsp页面展示的效果会跟html5页面不一样,...
890 0
页面跳转的几种用法区别
一. my.navigateTo: 保留当前页面,跳转到应用内的某个页面,路径后可带参数;使用 abridge.navigateBack 可以返回到原页面; 示例代码:  my.navigateTo({ url: 'test?id=1' })  二.
379 0
html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计
序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度相同 成为一个正方形 甚至任何你想要比例 一,背景:目前移动端大多数图片或视频列表页面的显示,列出...
989 0
+关注
52
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载