js或者jquery如何获取自适应宽度的具体值

JavaScript09

js或者jquery如何获取自适应宽度的具体值,第1张

网页可见区域宽： 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

<style>

.frame_all{

padding:5px 5px 0px

display:block

float:left/*这里让div飘了*/

background-color:red}

.frame_img{

background-color:blue}

.frame_title{}

.frame_title span{

font-size:14px

line-height:23px

font-weight:bold

color:white

display:block

text-align:center

margin:0 auto}

</style>

<div class="frame_all">

<div class="frame_img">

<img src="" width="100" height="150" />

</div>

<div class="frame_title">

<span>标题</span>

</div>

</div>

想让div自动适应宽度就直接飘（float）就好了，但是飘理解的不深刻就会飘乱了。

内部的那个span不要设置宽度，因为它本来就不固定。

你可以把代码贴出来，我给你改改。这段代码你看看对你有帮助没

1.首先，在网页代码的头部，加入一行viewport元标签。

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。

所有主流浏览器都支持这个设置，包括IE9，对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

2、不使用绝对宽度由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxx px

只能指定百分比宽度：width: xx%或者width:auto

3、相对大小的字体

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

body {

font: normal 100% Helvetica, Arial, sans-serif

}

上面的代码指定，字体大小是页面默认大小的100%，即16像素。

h1 {

font-size: 1.5em

}

然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。

small {

font-size: 0.875em

}

small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。