认识达内从这里开始

随着互联网的不断发展，越来越多的企业都希望能够在网络上有一个自己的官方网页，而由于用户的来源渠道不一样，访问网页的设备也不一样，这就要求我们在制作网页的时候需要设计不同的尺寸来符合用户的使用体验。而响应式的网页设计就可以完全满足这个需求。所以，我们今天就一起来聊聊关于响应式网页设计的一些知识。下面就开始今天的主要内容吧。

1.响应式图像的应用与回退

特点：应用简单，上手容易，性能表现良好

难点：lazyload实现

根据不同设备，不同分辨率，不同像素比使用的响应式图像，常用的有两种场景：

1.1固定尺寸图像

基于设备像素比选择，很多网站logo就是固定宽度图像的一个例子，不管viewport的宽度如何，始终保持相同的宽度。

1.2不固定尺寸图像

与内容相关的图片，在需要响应式的时候，它们的大小往往并不是不变的，会随viewport改变，对于这类图像，也有两种常用的处理方式

1.2.1我们使用srcset搭配w描述符以及sizes属性。

w描述符告诉浏览器列表中的每个图象的质量。sizes属性是一个包含两个值的，由逗号分隔的列表。根据最新规范，如果srcset中任何图像使用了w描述符，那么必须要设置sizes属性。

sizes属性有两个值：第一个是媒体条件;第二个是源图尺寸值，在特定媒体条件下，此值决定了图片的宽度。

1.2.2.picture元素，可精确把控

picture元素就像是图像和其源的容器。浏览器仍然需要img元素，用来表明需要加载图片，如果没有img，那么什么都不会渲染。source为浏览器提供了要显示图像的供选版本。

适用场景为：在一个精确特定的转效点(breakpoint)需要显示一个特定的图像时。使用picture元素选择图像，不会有歧义，理解起来也更直观。

2.特殊格式的图像应用与回退

特点：体积优化效果显著

难点：兼容性掌控

有一些图像格式在较小的文件大小情况下保证了较好的图片质量。听起来还不错，但残酷的事实是没有一个新格式被所有浏览器支持。谷歌的WebP表现不错，但只有Chrome和Opera原声支持。JPEG-XR，最初被称为高清照片，是微软发布的一个专有图像格式，仅InternetExplorer支持source的type属性用来指定每个图像的MIME类型，浏览器会选择第一个含有其支持的MIME类型的源。源的顺序是至关重要的，如果浏览器无法识别所有的图象类型，它会回退至原来的img元素。

但是目前这些格式的支持多数不会直接这么做，因为代码会有些冗余难看，有判断浏览器ua输出不同dom或者样式的，也有服务端直接输出的。服务端直接输出，或者CDN做特殊处理，进行无感知格式切换，同时预留url和拒绝的接口，处理起来更灵活，省时省力。

3.SVG应用

难点：变色方案，响应式定位计算

说起SVG，这是个出现频率比webp更高的图像格式了，他有着比iconfont更多的优点，所以现在web上正在大量的应用。

优点：

1.SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果等能力，它还具备了传统图片没有的矢量功能，可适配任何高清屏。

2.可读性好，有利于SEO与无障碍

与iconfont对比

1.渲染方式不同

关于渲染方式，之前欧文同学的文章已经讲述的很清楚，这里不多做叙述(https://isux.tencent.com/svg-icon-part-one.html)，无论黑白渲染，灰度渲染，次像素渲染，还是DirectWrite或GDI渲染，既然iconfont他是一个字体，就难逃出现锯齿的命运，特别是在一倍屏幕下的渲染。

2.iconfont只能支持单色

iconfont做为字体无法支持多色图形，这就对设计造成了许多限制，因此这也成为了iconfont的一个瓶颈。

3.iconfont可读性不好

iconfont主要在页面用Unicode符号调用对应的图标，这种方式不管是浏览器，搜索引擎和对无障碍方面的能力都没有SVG好在对比完之前，可能有同学就会问，SVG和iconfont对比有个致命的缺点，就是换色.

作者：练小习

【免责声明】本文系本网编辑部分转载，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请在30日内与管理员联系，我们会予以更改或删除相关文章，以保证您的权益！