js实现自适应界面分辨率

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

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

该页面就是要显示一个iframe的界面，当然你也可以直接在ifranme元素中直接通过style来定义高度、宽度、但是这样就直接把宽高写死了，不推荐 ，这里建议使用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>

这样就可以实现自适应了