开始了解响应式图片

  响应式,根据屏幕尺寸和分辨率的设备上都能良好工作以及其他特性的图片,接下来考虑怎样创建自适应得图片,专注于img元素,完成自适应。

  分辨率切换,不同的尺寸

  <img srcset="elva-fairy-320w.jpg 320w,

        elva-fairy-480w,jpg 480w,

        evla-fairy-880w,jpg 800w"

    sizes="(max-width: 320px) 280px,

        (max-width: 480px) 440px,

        800px"

    src="elva-fairy-880w,jpg" alt="elva dressed as a fairy">

其中srcset和sizes属性看起来比较复杂,按照上述样子进行格式化后,就定义好了浏览器选择的图像集以及每个图像的大小,包含一个文件名 一个空格 图像的固有宽度,这里的宽度单位用w表示,表示图像的真是大小,sizes属性定义了一组媒体条件,屏幕宽度知名某些媒体条件为真时,选择什么样的格式,(max-width: 480px)叫媒体条件,当媒体条件为真时填充后面的槽宽度。最后一个没有媒体宽度时默认条件。当浏览器匹配了第一个后续的媒体条件将被忽略。

  对于图片的插入还可以改用picture条件,代码如下:

<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

source包含一个media属性,仅仅你在艺术方向场景下使用media属性。

  浏览器加载一个页面会先下载任意图片也叫预加载(相对应的叫懒加载),发生在主解析器开始加载和解析css.js之前的,所以需要设置srcset,方法监测media如果你用js控制还需要先监测视图宽度如果不合适还需要将原先已经加载好了的替换掉,对响应式理念来说,很糟糕。

  大胆使用现代图像格式。

  新的图片格式webp  ipeg-2000高质量且小,虽然浏览器支持程度不大一致,通过使用picture指定type属性兼容其他不支持的类型;

<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

在source元素中只可以引用声明的文件类型。

  小结:艺术方向,为不同的布局裁剪图片,桌面布局完整横向的图片,手机布局显示裁剪过的纵向图片,用picture元素实现;分辨率切换,为窄频提供小图片或者高分辨率提供不同分辨率的图片,通过SVG、srcset、sizes来实现。

HTML入门12的更多相关文章

  1. Cesium入门12 - Camera Modes - 相机模式

    Cesium入门12 - Camera Modes - 相机模式 Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ ...

  2. C# 经典入门12章-System.Collections.Generic命名空间

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtUAAAAsCAIAAAAl09PEAAAgAElEQVR4nOx95Vscyd7285cMPrg7Aw ...

  3. C# 经典入门12章-使用泛型-1

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA8sAAAK5CAIAAAAHDiuGAAAgAElEQVR4nOyd9V9Uzfv/v3/J0t0N0p

  4. Jmeter入门12 __time函数 jmeter获取当前系统时间

    有的接口要传递当前的日期或时间,可以用__time()函数获取当前时间 ${__time()} 当前时间到计算机元年的毫秒数 ${__time(时间格式)}  以预定的格式显示当前时间  请求示例: ...

  5. SVG 2D入门12 - SVG DOM

    使用脚本可以很方便的完成各种复杂的任务,也是完成动画和交互的一种主流方式.由于SVG是html的元素,所以支持普通的DOM操作,又由于SVG本质上是xml文档,所以也有一种特殊的DOM操作,大多称之为 ...

  6. openresty入门12 openresty php 整合

    利用 openresty 的 drizzle-nginx-module模块 读取数据 传递到  php后端 利用到  openresty 的并发,无阻塞,mysql连接池,memcache|redis ...

  7. C# 经典入门12章-使用泛型类型-2

  8. Linux入门(12)——解决双系统下Ubuntu16.04不能访问Windows分区

    解决办法一: 进入windows系统,关闭快速启动,关机. 解决办法二: 如果办法一不能解决问题,用这个办法. 查看盘符: sudo fdisk -l 需要在查看盘符后记下目标盘符的数字,比如想解除C ...

  9. JAVA入门[12]-JavaBean

    一.什么是JavaBean JavaBean是特殊的Java类,使用Java语言书写,并且遵守规范: 提供一个默认的无参构造函数. 需要被序列化并且实现了Serializable接口. 可能有一系列可 ...

随机推荐

  1. 2018-2019-2 20165337《网络对抗技术》Exp2 后门原理与实践

    基础问题回答 (1)例举你能想到的一个后门进入到你系统中的可能方式? 下载破解游戏,盗版电影或安装来历不明的软件,可能被留下后门. (2)例举你知道的后门如何启动起来(win及linux)的方式? w ...

  2. SpringMVC-Helloworld 的归纳理解

    前面使用SpringMVC写了Helloworld, 发现理解不是很深刻,很多东西只是跟着教学视频敲才会 现在那Helloworld以及一般的SpringMVC归纳一下: SpringMVC入门Hel ...

  3. Spring中@Component注解,@Controller注解详解

    在使用Spring的过程中,为了避免大量使用Bean注入的Xml配置文件,我们会采用Spring提供的自动扫描注入的方式,只需要添加几行自动注入的的配置,便可以完成 Service层,Controll ...

  4. jsp参数乱码解决

    iframe src引入jsp,?跟着的中文参数会乱码 解决方法: var CJJG=encodeURI(encodeURI(value.data.CJJG));//js里面转码一次 //jsp页面里 ...

  5. MUI上传图片之选择相册和相机上传

    1.因为项目中有三处地方需要上传,所以html中存在三处地方.身份证正反面为上传一张,发票限制上传9张. <div class="action1"> <!--展示 ...

  6. Uni-app事件处理

    事件表: Web事件 uni-app事件 click tap touchstart touchstart touchmove touchmove touchcancel touchcancel tou ...

  7. 基于spark-streaming实时推荐系统

    基于spark-streaming实时推荐系统(一) 基于spark-streaming实时推荐系统( 二) 基于spark-streaming实时推荐系统(三)

  8. swoole 4种PHP回调函数风格

    匿名函数 $server->on('Request', function ($req, $resp) use ($a, $b, $c) { echo "hello world" ...

  9. pg 生成数据字典

    select (select relname||'--'||(select description from pg_description where objoid=oid and objsubid= ...

  10. javascript中所有函数参数都是按值传递

    在看<JavaScript高级程序设计>(第三版)的时候,传递参数这一节,里面提到 ECMAScript中所有函数的参数都是按值传递的 它自己的解释是, 把函数外部的值复制给函数内部的参数 ...