html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计
序：通常我们只能控制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 实现动态宽高度等比响应式页面设计的更多相关文章
- html5/css3响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
- HTML5+CSS3的响应式网页设计：自动适应屏幕宽度
这几天都在修改博客上面的样式.本来用的是d83.0的模板.自己又修改了许多地方,其中自己修改的一些地方在手机里面显示的效果不是很理想,于是想改成自适应的效果.对CSS3不是特别的熟练,只能去网上找找案 ...
- HTML5、CSS3与响应式Web设计入门(2)
HTML5的宽泛含义开拓了Web开发的视野,增加了开发方案的多样性,同时也带给很多Web开发者不小的困惑,就是HTML5在涉及到Web某个应用领 域的开发时,到底代表了什么?本篇文章的目的就在于跟大伙 ...
- html5 + css3 + jQuery + 响应式布局设计
1. [代码][HTML]代码 <!DOCTYPE html><html dir="ltr" lang="zh-CN">< ...
- <HTML5和CSS3响应式WEB设计指南>译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...
- HTML5入门教程：响应式页面布局
摘自:https://www.sohu.com/a/225633935_647584 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...
- HTML5、CSS3与响应式Web设计入门(1)
HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野.HTML5本身就是一个很 ...
- 【01】《响应式Web设计：HTML5和CSS3实战》
[01] (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(全).pdf 共246页. 2013年1月出版. 读后感:适合入门的书籍,对于响应式布局, ...
- 《响应式Web设计—HTML5和CSS3实战》 学习记录
作者:Ben Frain 学习时间 2016/5/12 第一章 设计入门 *视口调试工具 IE:Microsoft Internet Explorer Develop Toolbar Safa ...
随机推荐
- zepto判断手机横竖屏
var CheckOrientation = (function(){ var win = $( window ), get_orientation, last_orientation, initia ...
- netty 粘包问题处理
netty 粘包问题处理 key words: netty 粘包 解包 半包 TCP 一般TCP粘包/拆包解决办法 定长消息,例如每个报文长度固定,不够补空格 使用回车换行符分割,在包尾加上分割符,例 ...
- Matlab中颜色线形和形状
1.颜色字符串有'c', 'm', 'y', 'r', 'g', 'b', 'w',和'k'.分别表示青,红紫,黄,红,绿,白和黑. 2.线型字符串有:'-' 为实线, '--' 为虚线, ':' 为 ...
- NYOJ-73 比大小 AC 分类： NYOJ 2014-01-17 21:29 195人阅读 评论(0) 收藏
典型的大数题目,这只是大数的比较,到时还有大数加减乘除,更加还有乘方,对于大数,一般用数组或者字符串,因为其他的结构类型一般都没有那么大 的范围!! 这道题目需要你仔细回想怎么比较俩个数字的大小,考虑 ...
- unset之讲解
unset (PHP 4, PHP 5) unset — 释放给定的变量 说明¶ void unset ( mixed $var [, mixed $... ] ) unset() 销毁指定的变量. ...
- BZOJ2199: [Usaco2011 Jan]奶牛议会
趁此机会学了一下2-SAT. 以前的2-SAT都是用并查集写的,只能应用于极小的一部分情况,这次学了一正式的2-SAT,是用一张有向图来表示其依赖关系. 2-SAT的介绍参见刘汝佳<训练指南&g ...
- sshd_config配置 详解
原文:http://blog.licess.org/sshd_config/ # 1. 关于 SSH Server 的整体设定,包含使用的 port 啦,以及使用的密码演算方式 Port 22 # S ...
- 通过 Mesos、Docker 和 Go，使用 300 行代码创建一个分布式系统
[摘要]虽然 Docker 和 Mesos 已成为不折不扣的 Buzzwords ,但是对于大部分人来说它们仍然是陌生的,下面我们就一起领略 Mesos .Docker 和 Go 配合带来的强大破坏力 ...
- ［译］如何使用 Docker 组件开发 Django 项目？
原文地址:Django Development With Docker Compose and Machine 以下为译文 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包 ...
- POJ 2027
#include<iostream> using namespace std; int main() { int time; cin>>time; int a; int b; ...