老生常谈之响应式开发

csRyan 发布于2019-08-30 11:10 / 1044人阅读

摘要：什么是响应式设计作为一名合格的前端开发攻城狮工程师，做的最多的恐怕就是多端适配，多端兼容的工作了吧，那么如何解决一套代码多端并行且多端适配呢这个时候响应式开发就应运而生了。五标签的属性除了响应式图像，标签还可以用来选择不同格式的图像。

什么是响应式设计？

作为一名合格的前端开发攻城狮（工程师），做的最多的恐怕就是多端适配，多端兼容的工作了吧，那么如何解决一套代码多端并行且多端适配呢？这个时候响应式开发就应运而生了。什么是响应式设计？什么又是响应式图像呢？
我们来了解什么是响应式设计：网页在不同的设备上，都可以达到让使用者感觉比较舒适的合理的视觉体验，叫做“响应式设计”（responsive web design）。
由响应式设计的网页图像，就叫做响应式图像

响应式的解决方案有很多，JavaScript 和css都可以实现，这里我们了解一种最简单的，语义最好的HTML的解决方案，而且浏览器都原生支持的。

一、由img标签引起的问题

这一行代码在移动端和PC端，插入的都是图片screen.png文件
这种方式虽然简单高效，可以多端并行，但是有很多的弊端：
1、体积比较大。假设来说我们这个图片有300Kb，在PC端可以使用较大的尺寸，那么在移动端，我么就需要一个看起来比较符合舒服的尺寸，这样既可以节省带宽，降低服务器的压力，也可以更快的让图片渲染出来，提供良好的用户体验。
2.像素密度问题。做过移动端的开发的攻城狮都了解过PC的渲染和移动端的渲染是不一样的。PC端一般是单倍的像素密度，而手机上的显示器往往是多倍的像素密度。这样的后果就是我们同样一张图，在PC上很清晰，到手机上渲染的时候看起来就很模糊，因为像素扩充了。
3.视觉体验。因为我们桌面级别的显示器屏幕的面积更大，可以暴露出来很多图像的细节，但是手机屏幕比较小，很多细节是无法看清楚的，需要突出重点

二、图片大小的选择

为了解决体积问题希望不同尺寸的屏幕，显示不同大小的图像，我们需要srcset属性搭配sizes属性。

上面代码中，

srcset:

srcset属性列出四张可用的图像，每张图像的 URL 后面是一个空格，再加上宽度描述符。

宽度描述符就是图像原始的宽度，加上字符w。上例的四种图片的原始宽度分别为320像素、640像素和1980像素。

2.sizes:sizes属性给出了三种屏幕条件，以及对应的图像显示宽度。宽度不超过440像素的设备，图像显示宽度为100%；宽度441像素到900像素的设备，图像显示宽度为33%；宽度900像素以上的设备，图像显示宽度为254px。

3.浏览器根据当前设备的宽度，从sizes属性获得图像的显示宽度，然后从srcset属性找出最接近该宽度的图像，进行加载。

假定当前设备的屏幕宽度是960px，浏览器从sizes属性查询得到，图片的显示宽度是33vw（即33%），等于320px。srcset属性里面，正好有宽度等于320px的图片，于是加载foo-320.jpg。

注意，sizes属性必须与srcset属性搭配使用。多带带使用sizes属性是无效的。

四、标签，标签

如果要同时适配不同像素密度、不同大小的屏幕，应该怎么办呢？

这时，就要用到标签。它是一个容器标签，内部使用和，指定不同情况下加载的图像。

上面代码中，标签内部有两个标签和一个标签。

标签的media属性给出媒体查询表达式，srcset属性就是标签的srcset属性，给出加载的图像文件。sizes属性其实这里也可以用，但由于有了media属性，就没有必要了。

浏览器按照标签出现的顺序，依次判断当前设备是否满足media属性的媒体查询表达式，如果满足就加载srcset属性指定的图片文件，并且不再执行后面的标签和标签。

标签是默认情况下加载的图像，用来满足上面所有都不匹配的情况。

上面例子中，设备宽度如果不超过500px，就加载竖屏的图像，否则加载横屏的图像。

五、标签的type属性

除了响应式图像，标签还可以用来选择不同格式的图像。比如，如果当前浏览器支持 Webp 格式，就加载这种格式的图像，否则加载 PNG 图像。

上面代码中，标签的type属性给出图像的 MIME 类型，srcset是对应的图像 URL。

浏览器按照标签出现的顺序，依次检查是否支持type属性指定的图像格式，如果支持就加载图像，并且不再检查后面的标签了。上面例子中，图像加载优先顺序依次为 svg 格式、webp 格式和 png 格式。

六、参考链接

http://www.ruanyifeng.com/blo...

更多优质文章请关注公众号

云服务器 GPU云服务器响应式响应式布局响应式网站响应式设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114819.html

老生常谈之响应式开发

摘要：什么是响应式设计作为一名合格的前端开发攻城狮工程师，做的最多的恐怕就是多端适配，多端兼容的工作了吧，那么如何解决一套代码多端并行且多端适配呢这个时候响应式开发就应运而生了。五标签的属性除了响应式图像，标签还可以用来选择不同格式的图像。什么是响应式设计？作为一名合格的前端开发攻城狮（工程师），做的最多的恐怕就是多端适配，多端兼容的工作了吧，那么如何解决一套代码多端并行且多端适配呢？这...

wangzy2019 2019-08-23 18:06 评论0 收藏0
设计架构

摘要：先来看一张系统前后端架构模型图。一种接口的约定本文用于定义一种统一的接口设计方案，希望具有参考价值。，和都是常见的软件架构设计模式，它通过分离关注点来改进代码的组织方式。如何无痛降低 if else 面条代码复杂度相信不少同学在维护老项目时，都遇到过在深深的 if else 之间纠缠的业务逻辑。面对这样的一团乱麻，简单粗暴地继续增量修改常常只会让复杂度越来越高，可读性越来越差，有没...

graf 2019-06-24 17:56 评论0 收藏0
前端每周清单第 41 期 : Node 与 Rust、OpenCV 的火花，网络安全二三事

摘要：的网站仍然使用有漏洞库上周发布了开源社区安全现状报告，发现随着开源社区的日渐活跃，开源代码中包含的安全漏洞以及影响的范围也在不断扩大。与应用安全是流行的服务端框架，本文即是介绍如何使用以及其他的框架来增强应用的安全性。 showImg(https://segmentfault.com/img/remote/1460000012181337?w=1240&h=826); 前端每周清单专注...

syoya 2019-08-21 17:48 评论0 收藏0
面试宝典

摘要：有谈谈面试与面试题对于前端面试的一些看法。动态规划算法的思想及实现方法帮大家理清动态规划的解决思路以及原理方法前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。极客学院前端练习题道练习题，面试季练练手。由数据绑定和排序引入的几个 JavaScript 知识点在 JavaScript 的数据绑定和做简单的表格排序中遇到的几个知识点 [[JS 基础...

neu 2019-08-29 14:00 评论0 收藏0