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请 ...
随机推荐
- MySQL 中,\g和\G的作用
MySQL 中,\g和\G的作用: \g 的作用是 go (\g) Send command to mysql server. \G 的作用是将查询到的结果,每行显示一个字段和字段值,方便查看 ego ...
- centos7使用163 yum源
一般是下载 .repo 源即可,但有时候我们需要安装一些额外的包,就需要下载 Extra Packages for Enterprise Linux (EPEL) 源, 比如我们需要用 yum 安装 ...
- EXT4 超级块介绍(转)
https://blog.csdn.net/sunlei0625/article/details/79011946 The superblock records various information ...
- STM32的SPI2操作Flash
关于STM32F107的SPI标志 SPI_I2S_FLAG_BSY和SPI_I2S_FLAG_TXE的疑问 http://www.openedv.com/posts/list/23579.htm ...
- 开源自然语言处理工具包hanlp中CRF分词实现详解
CRF简介 CRF是序列标注场景中常用的模型,比HMM能利用更多的特征,比MEMM更能抵抗标记偏置的问题. [gerative-discriminative.png] CRF训练 这类耗时的任务,还 ...
- 排序算法<No.4>【基数排序】
由于春节,以及项目要上线的原因,导致这期的算法博文跟进的有点慢,内疚! 今天要介绍的是排序算法中的基数排序(Radix Sort),这类排序也是一个分而治之的排序,是对桶排序的一个升级和改造,也是稳定 ...
- 超级账本Hyperledge的关键部件说明
帐本(Ledger) Fabric帐本(Ledger)是一系列有序和防篡改的状态转换的记录,结构由一个区块链构成,并将不可变的.有序的记录存放在区块中:同时包含一个状态数据库来记录当前的状态,账本的当 ...
- Ubuntu 14.04 正式版 12.4
安装Ubuntu 14.04后要做的5件事情 4月17日,开源免费系统Ubuntu官方正式宣布发布Ubuntu 14.04 LTS(代号Trusty Tahr)正式版.官方声称该版本主打云计算,在云平 ...
- How to set up github to work with Visual Studio 2013
http://michaelcrump.net/setting-up-github-to-work-with-visual-studio-2013-step-by-step/ 1. Create gi ...
- 一个OpenGL小程序
发个没什么技术含量的文,最近准备通过opengl的学习来好好c++,于是找了网上的教程来搭建opengl的编写环境,建了个空项目,又找了个案例稍微改了改运行了下,还成,ok了~喜不自禁~ 贴个图: 代 ...