web响应式图片的5种实现

时间: 2018-11-05阅读: 1086标签: 响应式

在目前的前端开发中,我们经常需要进行响应式的网站开发。提起响应式,大家应该想到三个概念: 弹性布局, 弹性图片, 媒体查询。本文着重介绍一下弹性图片,也就是响应式图片的解决方案。


一、js或服务端  

通过js或者服务端来控制图片的加载,原理就是跟踪window的resize事件,然后修改图片的路径,代码如下  

<div class="content">
    <img src="" alt=""/>
</div>

<script src="js/vendor/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        function makeImageResponsive() {
            var width = $(window).width;
            var img = $(".content img");
 
            if (width <= 480) {
                img.attr('src', 'img/480.png')
            } else if (width <= 800) {
                img.attr('src', 'img/800.png')
            } else {
                img.attr('src', 'img/1600.png')
            }
        }
 
        $(window).on('resize load', makeImageResponsive());
    })
</script>

这种形式还有一种类似的变种,就是通过把屏幕或者设备信息写入cookie,获取图片的时候在服务器端选择返回哪种图片,这样就不需要我们来写脚本了。 


二、srcset  

通过js或服务端加载确实可以达到响应式图片的目的,兼容性也非常的好,但是需要我们编码实现响应式的逻辑,在修改的时候也不是很方便属于命令式的实现,以下方法使用声明式的实现,就是把图片的地址声明在html中,由浏览器自行来决定如何加载,这样更加灵活,把展示的逻辑从硬编码中分离出来,降低了耦合。

现在html5中对于img标签新增了一个srcset属性。 属性值为以逗号分隔的一个或多个字符串。每个字符串由以下组成:  

a. 一个图像的URL。 
b. 可选的, 空格后跟以下的其中一个  

~ 一个宽度描述符,后面紧跟’w’符号。 
~ 一个像素描述符,后面紧跟’x’符号。

<img class="image" src="img/480.png" srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"/>

设置srcset属性后浏览器会根据我们的页面不同,从当前的浏览环境进行感知,然后选择一个图片进行加载。当超过480时,加载的图片变成了800,当超过800时,图片变成了1600。但当我们把屏幕变小时,图片始终是1600,是因为浏览器已经在大的分辨率下加载了大的图片,那么会被默认放在缓存中,使用大的图片不再会有网络消耗,当然使用更大的图片更好咯。 


三、sizes  

当然这个属性可以配合sizes属性结合使用。sizes属性可以设置一些类似媒体查询的规则。 例如:

前面的第二种方法单独使用的话会有一个坑,就是例如当img的宽度只占50%,当我们加宽宽度的时候,加宽到480,但此时图片的宽度只有240,图片仍然变成了800。这时srcset属性就还需要配合sizes属性进行使用(第二种方法的sizes属性值默认为100vw)。 

<div class="content">
    <img class="image" src="img/480.png"
        srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
        sizes="50vw"/>
</div>

sizes属性内还可以写入媒体查询,例如 

<style>
        html, * {
            margin:0;
            padding:0;
        }
 
        .content {
            width:100%;
            margin:0 auto;
        }
 
        .content img {
            display: block;
            max-width: 100%;
        }
    </style>
</head>
<body>
<div class="content">
    <img class="image" src="img/480.png"
        srcset="img/480.png 480w, img/800.png 800w, img/1600.png 1600w"
        sizes="(min-width:800px) 800px, 100vm"/>
</div>

就是当浏览器宽度小于800时,按照100vw来设置图片;但超过800时,就是定宽了。 


 四、picture标签

 这个也是HTML5的新属性。 可以放置多个source标签,以指定不同的图像文件名,进而根据不同的条件进行加载。用法:

  • 创建标签。
  • 里面放置标签用来展示可能用到的图像
  • 对source添加srcset属性来指定图片URL,添加media属性,来规定媒体查询。
  • 添加一个回退的元素

这个例子表示在大于800px的时候,展示ad002-l这个large图片。 在大于480px的时候,展示ad002-m这个medium图片。 否则,展示ad002小图片。  

<picture>
    <source srcset='src/img/ad002-l.png' media='(min-width: 50em)'/>
    <source srcset='src/img/ad002-m.png' media='(min-width: 30em)'/>
    <img src="src/img/ad002.png"/>
</picture>

现在很多浏览器对于picture这个标签还不支持,所以我们需要用到picturefill.js来解决。  


五、svg图片

SVG图片不是一个简单的图像,而是一个规则。所以可是很好的响应式,不过因为比较复杂,所以一般都是对于一些简单的图像使用svg,对于复杂,颜色多的图片,不采用SVG。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1263

关闭

实现响应式_CSS变量

CSS 变量是 CSS 引入的一个新特性,目前绝大多数浏览器已经支持了,它可以帮助我们用更少的代码写出同样多的样式,大大提高了工作效率,本篇文章将教你如何使用 CSS 变量(css variable)。CSS中原生的变量定义语法是:--*,变量使用语法是:var(--*),其中*表示变量名称

Vue3.0 响应式数据

重构后的 Vue3.0 和之前在写法上有很大的差别,早前在网络上对于 Vue3.0 这种激进式的重构方式发起了一场讨论,见仁见智。不多说先看看 Vue3.0 在写法上激进到什么程度。

vue 响应式解析

在vue中当改变data中的price, quantity, sum中的值,其依赖这三个字段的地方就会触发更新,这就是响应式,那么vue具体是怎么实现的呢?

js+rem动态计算font-size的大小适配各种手机设备

需求:在不同的移动终端设备中实现,UI设计稿的等比例适配。使用js动态改变html的字体大小font-size+rem的特性,来保证最初的设计图中每个元素的尺寸比例不变

css媒体查询与响应式

根据一个或多个基于设备类型、具体特点和环境的媒体查询来应用样式。简单来说就是针对不同的媒体类型(比如屏幕、打印机或者屏幕阅读器)定义不同的样式,可以针对不同的屏幕尺寸设置不同的样式

响应式网站的设计流程

当客户提出产品功能移动化的需求时,虽然响应式站点并不能算是一种纯粹的移动化解决方案,但是,在某些情况下,这种方式是非常值得考虑的。需要先花些心思将原本的网站打造得更具弹性

vue响应式系统--observe、watcher、dep

Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象,而当你修改它们时,视图会进行更新,这使得状态管理非常简单直接,我们可以只关注数据本身

函数式响应式编程 - Functional Reactive Programming

问题: 输入密码时,确认密码还是空的,出现密码不一致错误提示,干扰用户输入。期望: 确认密码没输入过时,不提示错误。为解决这个问题,用 isConfirmPwdTouched 标识确认密码输入框是否输入过内容。

深入响应式原理

说到响应式原理其实就是双向绑定的实现,说到 双向绑定 其实有两个操作,数据变化修改dom,input等文本框修改值的时候修改数据1. 数据变化 -> 修改dom;2. 通过表单修改value -> 修改数据

css3响应式布局教程

一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验。在何种设备或者软件上将页面打开;and:连接媒体类型和媒体特性

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!