Div 自适应屏幕大小

http://blog.csdn.net/wodetiankong516/article/details/7827256

Background
      有时, 我们需要将div或者其他的Element 自适应屏幕,窗口以及浏览器 , 这样会提高页面美观,提升用户体验, 只是个小问题,但是它用到的知识
还是可以吸收一下。

Knowledge prepared
      这里准备下我们所要了解的一些size属性,有助于我们设置自己需要的大小。
description
attribute name
网页可见区域宽
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

Solution
结合CSS, 我们就可以很容易做到,让它自适应任何对象了。你可以桌面属性设置不同的分辨率来检查一下这个div的大小了。

[html] view plaincopy

<div id ="banner"> This is the title </div>

[css] view plaincopy

div#banner 

width:expression(window.screen.width - (border 边框) - (scroll width 滚动条宽度) ); 
}

时间: 2024-11-10 08:34:37

Div 自适应屏幕大小的相关文章

html图片自适应屏幕大小(手机)

body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,select,table,td,textarea,th,ul { margin: 0; padding: 0 } body { min-width: 320px; font-family: 'microsoft yahei',Verdana,Arial,Helvetica,sans-serif; color: #333; -webkit-text-s

iframe去滚动条+自适应屏幕大小

iframe去滚动条 <iframe name="myFrame" id="myFrame" frameborder="0" src="tab.action" style="margin:0 auto;width:100%;height:100%;" scrolling="no"></iframe> iframe自适应屏幕大小 function resetIfra

android 应用程序自适应屏幕大小(转载)

android应用自适应多分辨率的解决方法 1. 首先是建立多个layout文件夹(drawable也一样).在res目录下建立多个layout文件夹,文件夹名称为layout-800x480等.需要适应那种分辨率就写成什么.注意:         a.   较大的数字要写在前面:比如layout-854x480而不能写layout-480x854.         b.   两个数字之前是小写字母x,而不是乘号.2. 在不能的layout下调整layout 的长宽等各种设置.以适应不同的分辨率

手机端Html自适应屏幕大小

需要在html<head><meta name="viewport"          content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> </head>  加入 手机端Html自适应屏幕大小,布布扣,bubuko.com

Atitit html5 Canvas 如何自适应屏幕大小

Atitit  html5 Canvas 如何自适应屏幕大小 可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize(resizeCanvas); function resizeCanvas() { canvas.attr("width", $(window).get(0).innerWidth); canvas.attr("height", $(window).get(0).innerHe

android 应用程序自适应屏幕大小

android应用自适应多分辨率的解决方法 1. 首先是建立多个layout文件夹(drawable也一样). 在res目录下建立多个layout文件夹,文件夹名称为layout-800x480等.需要适应那种分辨率就写成什么. 注意: a.   较大的数字要写在前面:比如layout-854x480而不能写layout-480x854. b.   两个数字之前是小写字母x,而不是乘号. 2. 在不能的layout下调整layout 的长宽等各种设置.以适应不同的分辨率. 3 最后需要在Andr

Android系统自适应屏幕大小

1.屏幕相关概念1.1分辨率是指屏幕上有横竖各有多少个像素1.2屏幕尺寸指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸android将屏幕大小分为四个级别(small,normal,large,and extra large).1.3屏幕密度每英寸像素数手机可以有相同的分辨率,但屏幕尺寸可以不相同,Diagonal pixel表示对角线的像素值(=),DPI=933/3.7=252android将实际的屏幕密度分为四个通用尺寸(low,medium,high,

android系统如何自适应屏幕大小

1.屏幕相关概念1.1分辨率是指屏幕上有横竖各有多少个像素1.2屏幕尺寸指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸android将屏幕大小分为四个级别(small,normal,large,and extra large).1.3屏幕密度每英寸像素数手机可以有相同的分辨率,但屏幕尺寸可以不相同,Diagonal pixel表示对角线的像素值(=),DPI=933/3.7=252android将实际的屏幕密度分为四个通用尺寸(low,medium,high,

picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到了这个东西 ,它能在浏览器不支持的时候提供一些替代的方式 ,对于响应式图片,有名的picturefill库能实现兼容性强的‘响应式’图片,对于不支持picture的浏览器,它会用js获取srcset后面的设置,然后决定输出什么样的图片 使用方法 引入js文件(可从cdnjs.com下载) <script