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. http协议工作原理（转）

     WWW是以Internet作为传输媒介的一个应用系统,WWW网上最基本的传输单位是Web网页.WWW的工作基于客户机/服务器计算模型,由Web 浏览器(客户机)和Web服务器(服务器)构成,两者之间 ...

  2. MFC下拉框

    在函数OnInitDialog()中添加一下语句可以添加选项到下拉框中 m_comboBox.AddString(_T("ALKATIP Basma Tom")); m_combo ...

  3. nw.js学习地址

    http://blog.sina.com.cn/s/blog_600e56a60102vqj2.html https://github.com/nwjs/nw.js/wiki/Manifest-For ...

  4. Python基础数据类型之集合

    Python基础数据类型之集合 集合(set)是Python基本数据类型之一,它具有天生的去重能力,即集合中的元素不能重复.集合也是无序的,且集合中的元素必须是不可变类型. 一.如何创建一个集合 #1 ...

  5. 在java中使用dom4j解析xml

    创建xml文档并输出到文件 import java.io.File; import java.io.FileOutputStream; import org.dom4j.Document; impor ...

  6. EIGRP

    因为rip的收敛时间长  尤其是使用过程中   链路down掉    重收敛的时间比较长  所以在中到大型的园区网中很少用到rip协议 只有在很小的局域网中用到rip   因为收敛时间可能会稍微短一些 ...

  7. ppp详解

    ppp   一   PPP     point to point protocol               数据链路层协议 PPP session establishment 1 link est ...

  8. PTA 09-排序2 Insert or Merge (25分)

    题目地址 https://pta.patest.cn/pta/test/16/exam/4/question/675 5-13 Insert or Merge   (25分) According to ...

  9. Codeforces 547B. Mike and Feet[单调栈/队列]

    这道题用单调递增的单调栈维护每个数能够覆盖的最大区间即可. 对于   1 2 3 4 5 4 3 2 1 6 这组样例, 1能够覆盖的最大区间是10,2能够覆盖的最大区间是7,以此类推,我们可以使用单 ...

  10. 七牛云杜江华：让云 + AI 成为企业服务的标配

    12 月 5-6 日,2018 创业邦 100 未来领袖峰会暨创业邦年会(以下简称「创业邦 100 未来领袖峰会」)在北京国家会议中心举行.12 月 5 日下午,七牛云执行副总裁杜江华在企业服务论坛上 ...