响应式开发是家常便饭

什么是响应式设计？作为一个合格的前端开发攻城狮（工程师），做的最多的恐怕就是多端适配和多端兼容的工作了，那么如何解决一套代码多端并行和多端的问题呢？适应？这时候，响应式开发应运而生。什么是响应式设计？什么是响应式图片？让我们来了解一下什么是响应式设计：网页能够在不同的设备上达到合理的视觉体验，让用户感觉更舒服，这就是所谓的“响应式网页设计”。响应式网页图片称为响应式图片。响应式的解决方案很多，javascript和css都可以实现。在这里，我们了解了具有最佳语义的最简单的HTML解决方案，并且所有浏览器都可以原生支持。1、img标签引起的问题这行代码分别在移动端和PC端插入，插入的是图片screen.png文件。这种方式虽然简单高效，可以实现多终端并联，但是也有很多缺点：1.体积比较大。假设我们的图片有300Kb，在PC端可以使用更大的尺寸，那么在移动端，我们需要一个看起来更舒服的尺寸，既可以节省带宽，又可以减轻服务器的压力。让图片更快渲染出来，提供良好的用户体验。2.像素密度问题。做过移动端开发的攻城狮都知道，PC端渲染和移动端渲染是不一样的。PC端一般是单像素密度，而手机端的显示往往是多像素密度。这样做的后果就是我们同一张图在PC上很清晰，但是在手机上渲染的时候就显得模糊了，因为像素被扩大了。3、视觉体验。因为我们桌面级显示器的屏幕面积比较大，可以把图像的很多细节都曝光出来，但是手机的屏幕比较小，很多细节是看不清楚的。需要突出重点。2.图片尺寸的选择为了解决体积问题，我们希望在不同尺寸的屏幕上显示不同尺寸的图片，我们需要srcset属性来匹配sizes属性。src="foo-1280.jpg">在上面的代码中，srcset:srcset属性列出了四个可用的图像，每个图像的URL后跟一个空格，再加上一个宽度描述符。宽度描述符是图像的原始宽度加上字符w。上例中四张图片的原始宽度分别为320像素、640像素和1980像素。2.sizes：sizes属性给出三种屏幕情况和对应的图片显示宽度。对于宽度小于440像素的设备，图片显示宽度为100%；对于宽度为441像素到900像素的设备，图像显示宽度为33%；对于宽度为900像素或以上的设备，图像显示宽度为254px。3、浏览器根据当前设备的宽度从sizes属性中获取图片的显示宽度，然后从srcset属性中找到最接近该宽度的图片并加载。假设当前设备的屏幕宽度为960px，浏览器通过size属性查询得到图片的显示宽度为33vw（即33%），等于320px。在srcset属性中，恰好有一张宽度等于320px的图片，于是加载了foo-320.jpg。请注意，sizes属性必须与srcset属性一起使用。单独的sizes属性是无效的。4、标签和标签要同时适配不同像素密度和不同尺寸的屏幕应该怎么做？这时候就用到了标签。它是一个容器标签，内部使用和来指定在不同情况下要加载的图像。<图片>在上面的代码中，标签里面有两个标签和一个标签。标签的media属性给出媒体查询表达式，srcset属性是标签的srcset属性，给出加载的图片文件。这里其实可以用sizes属性，但是因为media属性，就没有必要了。浏览器根据标签出现的先后顺序判断当前设备是否满足media属性的媒体查询表达式，如果满足则加载srcset属性指定的图片文件，不执行后续的标签和标签。标签是默认加载的图片，以满足上述所有不匹配的情况。在上面的例子中，如果设备的宽度不超过500px，则加载竖屏图片，否则加载横屏图片。5、标签的type属性除了响应式图片，标签还可以用来选择不同格式的图片。例如，如果当前浏览器支持Webp格式，则加载该格式的图片，否则加载PNG图片。<图片>上面的代码中，标签的type属性给出了图片的MIME类型，srcset就是对应的图片URL。浏览器根据标签出现的顺序检查是否支持type属性指定的图片格式，如果支持则加载图片，不检查后面的标签。在上面的例子中，图片加载的优先级顺序是svg格式、webp格式和png格式。6.参考链接http://www.ruanyifeng.com/blo...更多优质文章请关注公众号