如何用javascript设置页面的宽度自适应

JavaScript06

如何用javascript设置页面的宽度自适应,第1张

使用javascript设置页面的宽度自适应的方法如下:

首先新建一个test.aspx空白页面,如图所示:

将一个div拖动到新建的test.aspx空白页面中,其中div的源码为<div id="Div1" runat="server"></div>。如图所示:

将JavaScript函数进行定义,其中源码为<script type="text/javascript"></script>。函数名可以自定义为function resizeDiv(minusWidth, minusHeight) {}。在自定义的函数中包含了高度和宽度,如图所示:

其中函数的详细内容为,如图所示:

函数调用完成之后,开始调用函数,页面默认剩余的宽度是20px和40px。如图:

函数调用完成之后,利用JavaScript设置页面的宽度自适应即可成功。

应该是设置rem的函数加载顺序问题,应该先加载这个函数和css再去加载dom,这样就没有自适应跳动的问题,如果在加载dom之后调用该函数的话(在body之后加载函数),这样进入页面,fontSize会先以默认值显示,当读取了设置函数后才进行自适应。

首先你得有个高宽比(比例),根据这个比,用js计算就是了。

function resizeHeight(id,size){

var ele = document.getElementById(id)

var width = ele.offsetWidth

ele.style.height = size*width+"px"

}

说明:id是div的id(String),size是高宽比(Number)。

调用:

resizeHeight("youId",0.5)

window.onresize = resizeHeight("youId",0.5)