js实现自适应界面分辨率

        最近由于业务需求需要进行前端的开发，所以，最近更新一下前端开发中所遇到的问题。首先最直接遇到的问题是，如果我们在css中将div的width和height写死的话，那么我们所遇到的问题就是当换一个不同的分辨率的显示器进行显示的时候，那么就会出现界面的样式不能适应当前分辨率的界面，所以，自适应是很重要的，javascript提供了很多功能我们可以很好的使用，话不多说，直接上代码：

html代码：

<div>
        <iframe id="tensor" border="0" frameborder="0"></iframe>
</div>

该界面就是要显示一个iframe的界面，当然，您可以直接在iframe元素中直接通过style来定义width、height的大小，但是这就写死了，自适应的代码如下：

js代码：

<script>
    window.onload = function () {   //加载页面的时候就执行
        var tensor_obj = document.getElementById("tensor");  //根据ID获取html元素
        var heigth_screen = window.screen.height;    //获取整个屏幕的分辨率
        var width_screen = window.screen.width;
        heigth_screen = heigth_screen * 0.85;        //在这里分配整个界面的85%给iframe来显示嵌套的界面
        tensor_obj.style.height = heigth_screen + "px";
        width_screen = width_screen * 0.85;
        tensor_obj.style.width = width_screen + "px";
    }

</script>





这样就可以实现自适应了




以上代码均实验通过，请各位大神指点，谢谢