Question

尝试让我的应用程序适应浏览器窗口的宽度和高度保持比例。

我已经包含了一个例子的JS小提琴：http://jsfiddle.net/4Mjtr/3/

在photoshop中切片所以输出html的方式是每个div类都有自己的css，例如

 //HTML//
<div class="id1462-Select-Pattern">
 <a href="Patterns.html"><img src="http://www.travel-master.co.uk/coach-hire-minibus-images/email-quote.jpg"width="183" height="45" alt="" /></a>
</div>

//CSS//
div.id1462-Select-Pattern {
    position:absolute;
    left:80px;
    top:723px;
    width:183px;
    height:45px;
 }

我尝试了媒体查询，但画布和图像似乎没有调整大小我也读到了文字，你必须手动更改字体大小，但图像没有正确调整大小

Answer 1

从图像中移除高度，仅设置宽度将调整图像大小并保持比例。

您可以使用javascript函数获取浏览器的宽度和宽度。高度，将是这样的：

function getBrowserWindowSize() {
    var myWidth = 0, myHeight = 0;
    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
    }
    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
        myHeight = document.documentElement.clientHeight;
    }
    else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
        myHeight = document.body.clientHeight;
    }

    var currWindow = new Array();
    currWindow[0] = myWidth;
    currWindow[1] = myHeight;
    return currWindow;
}

您可以管理所需的元素宽度和宽度。通过再次调用此函数调整resize和load事件的高度。

调整表格或窗口的大小？ HTML5

1 个答案: