利用onresize使得div可以随着屏幕大小而自适应的代码
原文：http://www.jb51.net/article/21831.htm
当我们让div居中时候，一般有两种方法，一种是固定左右宽度，也就是使用像素绝对定位；另一种是用百分比来相对定位，在这种两种方式下，绝对定位是不能让div随着屏幕而自适应的，而用百分比就可以，但是，是用百分比就会有一个新的问题，如果我们的页面中有这么一句
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
的时候，top的百分比将会失效，而删除这句话的时候，一切正常，都是不知道这句标准的声明为什么会带来如此的不便
针对这个问题，我使用的下面的方法来实现div的自适应
首先 我用的是绝对定位的方式，先设置好div的左右上下边距。在body中添加两个事件，
<body bgcolor="#666666" onresize="test()" onload="getwah()">
getwah()用来获取屏幕的大小和div的各个边距，并计算出它们的差
function getwah()
{
if(document.documentElement && document.documentElement.clientWidth)
{d_width = document.documentElement.clientWidth;}
else if(document.body)
{d_width = document.body.clientWidth;}
width=parseInt(d_width);
width_cha1=width-parseInt(document.getElementById("backi").style.left)
width_cha2=width-parseInt(document.getElementById("massage_box").style.left)
}
当屏幕大小变化的时候(onresize)触发test()函数，该函数就是用户根据之前获得屏幕与边距的差值重新设置div的边距，这样就可以实现党屏幕的大小改变后，div的边距也会相应地改变，从而实现div可以随着屏幕大小的改变而自适应
{
if(document.documentElement && document.documentElement.clientWidth)
{d_width = document.documentElement.clientWidth;}
else if(document.body)
{d_width = document.body.clientWidth;}
var now_left1=parseInt(d_width )-width_cha1;
var now_left2=parseInt(d_width )-width_cha2;
document.getElementById("backi").style.left=now_left1
document.getElementById("massage_box").style.left=now_left2
}
利用onresize使得div可以随着屏幕大小而自适应的代码的更多相关文章
- div宽度随屏幕大小变化
题目: 一个页面上两个div左右铺满整个浏览器, 要保证左边的div一直为100px,右边的div跟随浏览器大小变化, 比如浏览器为500,右边div为400,浏览器为900,右边div为800. 方 ...
- 不同css样式适应不同屏幕大小实现自适应宽度
@media screen and (判断属性){ CSS样式选择器 } 例如: <div class="silder_photo"></div> < ...
- ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息
一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...
- android系统如何自适应屏幕大小
1.屏幕相关概念 1.1分辨率 是指屏幕上有横竖各有多少个像素 1.2屏幕尺寸 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 android将屏幕大小分为四个级别 ...
- echarts生成的图表大小怎么随屏幕的大小改变自适应
最近在做图表,记录一下用到的知识点,当做自己的日记吧,会不断添加新内容 1,echarts生成的图表大小怎么随屏幕的大小改变自适应? this.chart.setOption(this.options ...
- html 网页背景图片根据屏幕大小CSS自动缩放
https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...
- JaveWeb 公司项目（2）----- 类模态窗口显示DIV并将DIV放置在屏幕正中间
上一篇博客写的是通过隐藏显示进行div的替换,接下来需要在原有的div前添加一个div,进行表单的提交,需要将div放置在正中间,然后类似C#中的模态窗口,在进行完新弹出的div操作之后,才可以进行下 ...
- Android系统自适应屏幕大小
1.屏幕相关概念1.1分辨率是指屏幕上有横竖各有多少个像素1.2屏幕尺寸指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸android将屏幕大小分为四个级别(smal ...
- js 根据屏幕大小调用不同的css文件
原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...
随机推荐
- .align
.align的作用是针对指令或数据的存放地址对齐.但不同的CPU架构,指令和数据的存储方式不同,也就导致对齐的计量单位不一样. i386:n对齐 ARM:2^n 对齐,ARM架构下,指令都是占32位, ...
- centos 7 下安装haproxy
1 haproxy 下载 从如下目录下载haproxy:http://www.haproxy.org/download/1.7/src/haproxy-1.7.1.tar.gz 2 haproxy 安 ...
- MySQL 中文显示乱码
最近关于中文显示乱码的贴子比较多,所以也做了个总结: 可以参考一下杨涛涛版主的<各种乱码问题汇总> http://topic.csdn.net/u/20071124/08/3b7eae69 ...
- linux用户密码生成
linux账户保存在/etc/passwd,密码保存在/etc/shadow. 通过man 5 passwd,man 5 shadow可查看文件中各字段含义. encrypted password ...
- Harmonic Number 求Hn； Hn = 1 + 1/2 + 1/3 + ... + 1/n; （n<=1e8) T<=1e4; 精确到1e-8； 打表或者调和级数
/** 题目:Harmonic Number 链接:https://vjudge.net/contest/154246#problem/I 题意:求Hn: Hn = 1 + 1/2 + 1/3 + . ...
- Mysql 变量讲解
set语句的学习: 使用select定义用户变量的实践将如下语句改成select的形式: set @VAR=(select sum(amount) from penalties);我的修改: sele ...
- Easyui Datagrid扩展fixRownumber方法
首先,从datagrid生成的代码,我们可以发现,在rowNumber上都有特定的class标记,datagrid-cell-rownumber,datagrid-header-rownumber. ...
- JavaScript 框架（库）
JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时. 为了应对这些调整,许多的 JavaScript (helper) 库应运而生. 这些 JavaScript 库 ...
- Eclipse 运行配置(Run Configuration)
Eclipse 运行配置(Run Configuration) 创建和使用 Eclipse 运行配置 在运行配置(Run Configuration)对话框中可以创建多个运行配置.每个配置可以在应用中 ...
- centos7下挂载U盘和移动硬盘
挂载U盘 1.使用fdisk -l命令查看磁盘情况 [root@localhost ~]# fdisk -l 磁盘 /dev/sda:1000.2 GB, 1000204886016 字节,19535 ...