js控制高度自适应,做到响应式
//9宫格布局
var prints=window.innerHeight-($('.header').height()+40);//屏幕去掉(头部高度+头部padding)
$('.weui-grid').height(prints/4-40);//屏幕保留四排,让每个占剩下的4分之一(去掉上下padding)
//内容居中,(一个格子的高度-内容高度)/2分给上下padding
$('.weui-grid').css({'paddingTop':((prints/4)-50)/2,'paddingBottom':((prints/4)-50)/2});
window.innerHeight适用在移动端
pc端:
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth
js控制高度自适应,做到响应式的更多相关文章
- html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计
序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度 ...
- Restive.js – 轻松让网站变成响应式和自适应
Restive.js 是一个 jQuery 插件,可以帮助您轻松快捷地添加响应式功能到你网站,适应几乎所有拥有 Web 功能的设备.使用设备检测,高级管理断点,以及方向管理的组合,Restive.js ...
- [css或js控制图片自适应]
[css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...
- HTML5 respond.js 解决IE6~8的响应式布局问题
HTML5 respond.js 解决IE6~8的响应式布局问题 响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...
- 项目新的需求,网页的自适应交付/响应式交付 Responsive/Adaptive Delivery
网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个102 ...
- CSS3+Js制作的一款响应式导航条
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...
- 用JS更好的实现响应式布局
响应式布局更加高效的方法: 代码实现 <script> $(function() { (function(){ var $html = $('html'); var $window = $ ...
- 去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。
对于iframe,相信大家都是知道存在很多弊端,比如说不利于搜索引擎的抓取:产生冗余结构体系不易管理等.不过在漫长的开发路上有时候使用是不可避免的. 前两天在做一个退弹的功能的时候使用了iframe, ...
- css3 @media支持ie8用respond.js 解决IE6~8的响应式布局问题
respond.js插件实现原理 接下来,需要理解respond.js的实现思路: 第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中: 第二步,遍历数组,并一个个发送AJAX请 ...
随机推荐
- 启用 webpack 的模块热替换特性
启用 webpack 的模块热替换特性: module.exports = { //... devServer: { hot: true } } 注意,必须有 webpack.HotModuleRep ...
- Hive介绍和Hive环境搭建
一.Hive介绍 Hive包含用户接口.元数据库.解析器和数据仓库等组件组成,其中用户接口包含shell客户端.JDBC.ODBC.Web接口等.元数据库主要是指定义在hive中的表结构信息,一般保存 ...
- C/C++中带可变参数的函数
1.带可变参数的函数由来 当函数中的参数个数不确定时,这时候就需要带可变参数的函数! 如我们经常使用的C库函数printf()实际就是一个可变参数的函数, 其原型为: int printf( cons ...
- Vim插件集合
插件Nerdtree实现浏览文件系统并打开文件或目录,在window中是非常不错的插件,但是在Ubuntu中这个插件就是一坑,特别提示,且无解.若在Ubuntu中使用目录浏览插件,建议使用其他插件,如 ...
- paramiko 实现ssh登录和sftp登录
简单ssh登录 import paramiko ssh = paramiko.SSHClient() ssh.set_missing_host_key_policy(paramiko.AutoAddP ...
- Excel技巧--图表添加平均线为指标
如上图,如果在柱状图有一平均指标线,就能很直观地显示各柱状值是否高于或低于平均值这个指标. 添加方法: (1)为表格制作一个柱状图: 2.对图表点右键,菜单选择“更改图表类型”.对话框如下选择: 3. ...
- 黄聪:HBuilder左侧项目管理器如何不与标签页一起自动切换
把这个按钮取消就好了
- Django--ORM--模型增删改查--备忘
以上运算符都区分大小写,在这些运算符前加上i表示不区分大小写,如iexact.icontains.istartswith.iendswith.insert into tb_bookinfo()valu ...
- DS树+图综合练习--带权路径和
题目描述 计算一棵二叉树的带权路径总和,即求赫夫曼树的带权路径和. 已知一棵二叉树的叶子权值,该二叉树的带权案路径和APL等于叶子权值乘于根节点到叶子的分支数,然后求总和.如下图中,叶子都用大写字母表 ...
- Xshell里连接VirtualBox里的Centos7
关闭虚拟机 右键虚拟机->设置->网络,连接方式选择NAT,如下图: 3.在Xshell里连接即可.