For small viewports, we want to save bandwidth and we may be dealing with slow speeds; so it's very important that images' filesizes are not too big. In this lesson, we are going to cover how to show a different-sized image than the one seen on desktop.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, maximum-scale=1" />

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/marx/2.0.7/marx.min.css">

  <link rel="stylesheet" href="style.css">

</head>

<body>
<!-- 700w: 700px; 90vw: 90% vieport width -->
  <img

    srcset="https://imgur.com/Nv96rWN.jpg 700w,

      https://imgur.com/aJOEQVz.jpg 1024w"

    sizes="(max-width: 480px) 90vw,

      (max-width: 700px) 70vw,

      60vw"

    src="https://imgur.com/aJOEQVz.jpg"

    alt="Opal lying on her new bed - my laptop case"

  >

</body>

</html>

[HTML5] Show Images of Differing Resolutions Depending on the Viewport Width with srcset的更多相关文章

  1. [HTML5] Show Different Variations of Images Depending on the Viewport Width using Art Direction

    For small viewports, we may want to show a variation of the desktop image. A very common use case of ...

  2. HTML5 Mobile 适应移动端的屏幕<meta name='viewport' content='xxxx'>

    网页手机wap2.0网页的head里加入下面这条元标签,在移动端的浏览器中页面将以原始大小显示,并不允许缩放. 加入 如下代码 即可自适应移动端的屏幕: <meta name="vie ...

  3. 闲扯游戏编程之html5篇--山寨版《flappy bird》源码

    新年新气象,最近事情不多,继续闲暇学习记点随笔,欢迎拍砖.之前的〈简单游戏学编程语言python篇〉写的比较幼稚和粗糙,且告一段落.开启新的一篇关于javascript+html5的从零开始的学习.仍 ...

  4. HTML5 之Canvas绘制太阳系

    <!DOCTYPE html> <html> <head> <title>HTML5_Canvas_SolarSystem</title> ...

  5. HTML5应用之时钟

    利用HTML5的Canvas API可以完成我们以前意想不到的动画效果,以前我们想在网页上放置一个时钟,需要先用flash工具制作一个钟表,并写上复杂的JavaScript代码,然后载入到页面中.而H ...

  6. web HTML5 调用摄像头的代码

    最近公司要求做一个在线拍照的功能,具体代码如下: <html> <head> <title>html5调用摄像头拍照</title> <style ...

  7. html5移动web开发实战必读书记

    原文  http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...

  8. html5绘制折线图

    html5绘制折线图详细代码 <html> <canvas id="a_canvas" width="1000" height="7 ...

  9. HTML5的在线视频播放方案

    移动端H5音频与视频问题及解决方案 看下最后实际效果:兼容PC,iphone, 安卓5.0 解决了,手动,自动,不全屏的问题 左边视频代替了动画,然后支持背景蒙板效果,能够透出底图 右边是原视频文件 ...

随机推荐

  1. Template--模板

    模板引擎的支持 配置 模板引擎配置为TEMPLATES设置.这是一个配置列表,每个引擎一个,默认值为空.这是settings.py生成的,通过startproject命令定义了一个更有用的值: TEM ...

  2. struts 乱码

    在进行struts开发的过程中,总也是出现很多的乱码问题 ,但归根到底,也只是以下三种情况: ㈠页面显示中文乱码 ㈡传递参数中文乱码 ㈢国际化资源文件乱码 下面就这三中情况介绍怎么在具体项目中处理这些 ...

  3. Hibernate的Session的get()和load()方法区别

    hibernate中Session接口提供的get()和load()方法都是用来获取一个实体对象,在使用方式和查询性能上有一些区别. get Session接口提供了4个重载的get方法,分别通过“持 ...

  4. 【12】link与@import的区别

    [12]link与@import的区别 link是HTML方式, @import是CSS方式 link最大限度支持并行下载,@import过多嵌套导致串行下载,出现FOUC link可以通过rel=& ...

  5. ASP.NET Web Application中使用链接文件

    最近重构一个内部的平台系统,作为一个平台,其下有几个子系统,每个子系统有自己的网站系统.而每个网站使用的是统一的风格,统一的验证机制,反馈系统,等等.所以,为了避免几个子系统中重复出现相同的资源或文件 ...

  6. Silverlight调用GP工具实现缓冲分析

    目的: 在地图上点击一个点生成一个缓冲区. 1.制作GP工具: GP工具制作按照http://help.arcgis.com/zh-cn/arcgisdesktop/10.0/help/index.h ...

  7. Jmeter接口测试-简单分析结果数、聚合报告以及图形结果（二）

    简单分析结果数.聚合报告以及图形结果 结果树 取样器结果:返回值报200,表示执行接口调试成功 请求:发送的数据 响应数据:返回的数据 Thread Name:线程组名称 Sample Start: ...

  8. PHP优化之批量操作MySQL

    设计一个数据表如下: create table optimization( id INT NOT NULL AUTO_INCREMENT, value VARCHAR(10) NOT NULL, PR ...

  9. zoj2112 主席树动态第k大 （ 参考资料链接）

    参考链接: http://blog.csdn.net/acm_cxlove/article/details/8565309 http://www.cnblogs.com/Rlemon/archive/ ...

  10. POJ-1236 Network of Schools，人生第一道Tarjan....

    Network of Schools 题意:若干个学校组成一个计算机网络系统,一个学校作为出发端连接着若干个学校,信息可以传送到这些学校.被链接的学校不需要再次与出发端相连,现在问你:A:最少选几个学 ...