老生常谈之响应式开发

2019-06-13 admin

什么是响应式设计?

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

clipboard.png

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

一、由img标签引起的问题

<img src="screen.png">

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

clipboard.png

二、图片大小的选择

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

<img srcset="foo-320.jpg 320w,
             foo-640.jpg 640w,
             foo-1280.jpg 1980w"
     sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="foo-1280.jpg">

上面代码中,

  1. 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属性是无效的。

四、<picture>标签,<source>标签

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

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

<picture>
  <source media="(max-width: 500px)" srcset="vertical.svg">
  <source media="(min-width: 501px)" srcset="cat-horizontal.svg">
  <img src="cat.jpg" alt="cat">
</picture>

上面代码中,<picture>标签内部有两个<source>标签和一个<img>标签。

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

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

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

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

五、<source>标签的type属性

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

<picture>
  <source type="image.svg" srcset="logo.svg">
  <source type="image.webp" srcset="logo.webp"> 
  <img src="logo.png" alt="ACME Corp">
</picture>

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

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

六、参考链接

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

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

clipboard.png

[转载]原文链接:https://segmentfault.com/a/1190000019466310

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67198.html

文章标题:老生常谈之响应式开发

相关文章
Web前端开发与iOS终端开发的异同
毕业之前一直在做前端开发,毕业后就转成做iOS开发,这两者有很多挺有意思的对比,尝试写下我能想到的它们的一些相同点和不同点。 语言 前端和终端作为面向用户端的程序,有个共同特点:需要依赖用户机器的运行环境,所以开发语言基本上是没有选择的,...
2016-01-13
HTML5游戏2015年的开发趋势
在互联网行业中,一个行业从零到成熟,开发者生态也是对应的,我们今年看到很多大公司,包括像微软和Google,也参与到了HTML5 开发者生态的建设当中。关于HTML5移动游戏的开发和盈利生态的走向又该去往何处?下面我们来试着讨论一下。 《围...
2015-11-12
JavaScript游戏之连连看源码分享
JavaScript游戏之连连看源码 下载地址:JavaScript游戏之连连看源码 解压密码:www.javascriptcn.com ...
2015-11-12
jQuery中DOM树操作之复制元素的方法
本文实例讲述了jQuery中DOM树操作之复制元素的方法。分享给大家供大家参考。具体分析如下: 复制元素 前面提到的操作包括:插人新创建的元素、将元素从文档中的一个位置移动 到另一个位置,以及通过新元素来包装已有的元素。可是,有时候也会用到...
2015-11-13
Node.js的不足之处
跨平台编程能力不够强大 Bowery团队指出Go能很方便地在不同系统里进行程序编译,这是他们转入Go的重要原因之一。 作为开发平台,对Linux,Windows,OSX等常见操作系统提供支援是能否吸引开发者的基本要素。在Go中,开发者可以针...
2015-11-12
Html5 是否适合移动应用开发
HTML5最近这几年声誉鹊起,而基于HTML5技术的产品也风生水起。感觉现在你的产品要是不和HTML5沾点边,都不好意思和客户打招呼!移动应用开发中,HTML5更是不可或缺的角色,市面上不少移动应用中间件产品都号称支持HTML5,例如APP...
2015-11-12
IO.js 1.0.0 正式发布,支持 ES6 语言特性!
IO.js 是为 V8 引擎编写的基于事件 IO 的实现。Node.js中一群不满Joyent公司控制的信徒发起了另外一个项目io.js,即另外一个支持服务器端JavaScript的变种,称为io.js或iojs 。 IO.js 1.0.0...
2015-11-12
使用axios发送post请求,body传送数据格式form和json区别
先来看看这两个种传送格式的写法 1.form格式,将Content-Type类型设置为application/x-www-form-urlencode,POST请求时将data序列化,提交的数据会按照 key1=val1&amp;key2=...
2018-07-25
关于Ajax应用开发需要注意的事项
接触Ajax,那时候的Ajax支持还不是很好,都要涉及底层,没有现成的框架给你调用。现在把常见的问题列举如下。 [b]1、编码问题[/b] 注意AJAX要取的文件是UTF-8编码的。GB2312编码传回BROWSE后中文会乱码。如果用VBS...
2015-11-11
HTML5移动应用开发的12大特性
1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM中,还可以在关闭浏览器后再次打开时恢复数据,以减少...
2015-11-11
回到顶部