HTML5/jQuery跨浏览器响应图像_Jquery_Html_Web_Responsive Design

HTML5/jQuery跨浏览器响应图像

jquery html web responsive-design

HTML5/jQuery跨浏览器响应图像,jquery,html,web,responsive-design,Jquery,Html,Web,Responsive Design,我正在尝试设计一种显示图像的方法，这种方法能够以跨浏览器兼容的方式响应调整大小。使用CSS3媒体查询是不行的，因为它们没有得到广泛支持。然而，jQuery使我能够利用HTML5中的“数据”属性这就是我想到的。还有谁有好主意吗？或者可以对这个想法进行任何调整 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5/jQue

我正在尝试设计一种显示图像的方法，这种方法能够以跨浏览器兼容的方式响应调整大小。使用CSS3媒体查询是不行的，因为它们没有得到广泛支持。然而，jQuery使我能够利用HTML5中的“数据”属性

这就是我想到的。还有谁有好主意吗？或者可以对这个想法进行任何调整

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML5/jQuery Responsive Images</title>
        <style>
            body { padding: 0; margin: 0; }
        </style>
        <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
        <script>
        $(window).resize(setSize)
        $(document).ready(setSize);
        function setSize() {
            var bodywidth = $(document).width();
            var small_max = 600;
            var medium_max = 800;

            if (bodywidth > small_max && bodywidth <= medium_max) {
                $('img').each(function(){
                    $(this).attr('src',$(this).data('src-800px'));
                });
            } else if (bodywidth <= small_max ) {
                $('img').each(function(){
                    $(this).attr('src',$(this).data('src-600px'));
                });
            } else if (bodywidth > medium_max ) {
                $('img').each(function(){
                    $(this).attr('src',$(this).data('src'));
                });
            }
        }
        </script>
    </head>
    <body>
        <img data-src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="Responsive image" style="width: 100%;" />
    </body>
</html>


HTML5/jQuery响应图像
正文{填充：0；边距：0；}
$（窗口）。调整大小（设置大小）
$（文档）.ready（设置大小）；
函数setSize（）{
var bodywidth=$（document）.width（）；
var小_最大值=600；
var中等_最大值=800；
如果（bodywidth>small_max&&bodywidth将img标记设置为display:inline将为您处理响应问题。
请看一看我在这方面发表的一系列博文：

基本上：
将图像标记放置在块中
通过添加基于noscript块的图像逐步增强页面
需要时，使用媒体查询侦听器更改图像
这种技术需要两个多边形填充，一个能够读取noscript标记textContent属性，另一个能够向IE<10提供媒体查询和媒体查询侦听器。
那么，您可以通过执行以下操作将if/then测试减少一半：if（bodywidth