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. python 学习总结5

    字符串类型及操作 一.字符串类型的表示 (1)字符串:由0个或多个字符组成的有序字符序列  例如:“请输入带有符号的温度值” 或者‘c’都是字符串 (2)字符串是字符的有序序列,可以对其中的字符进行索 ...

  2. Ubuntu 14.04在虚拟机上的桥接模式下设置静态IP

    1.虚拟机--->虚拟机设置 将虚拟机设置为桥接模式 2.查看window 网卡以及IP信息 cmd下输入 ipconfig -all 可以看到,我的网卡为Realtek PCIe GBE Fa ...

  3. 算法学习记录-图——应用之拓扑排序（Topological Sort）

    这一篇写有向无环图及其它的应用: 清楚概念: 有向无环图(DAG):一个无环的有向图.通俗的讲就是从一个点沿着有向边出发,无论怎么遍历都不会回到出发点上. 有向无环图是描述一项工程或者系统的进行过程的 ...

  4. 利用visual studio 搜索替换功能清除项目中javascript文件的debugger;

    在做web项目中,写js代码时候,会有一堆的debugger;,当时又懒得删,后面就多起来了,在vs的编辑器里面,其查找替换功能支持正则和整个项目/解决方案替换,这样就很容易删掉debugger;,方 ...

  5. luogu2526 [SHOI2001]小狗散步

    注意一个景点只能去一次. #include <iostream> #include <cstring> #include <cstdio> #include < ...

  6. OmniGraffler软件和激活码

    mac上用户画图的软件:OmniGraffler破解方法 1.激活码 Name: Appked SN: MFWG-GHEB-HYTW-CGHT-CSXU-QCNC-SXU 2.软件连接 链接: htt ...

  7. 【Luogu】P1306斐波那契公约数（递推）

    题目链接 有个定理叫gcd(f(n),f(m))=f(gcd(n,m)) 所以递推就好了. #include<cstdio> #include<cstdlib> #includ ...

  8. PAT天梯赛练习题——L3-008. 喊山（邻接表+BFS）

    L3-008. 喊山 时间限制 150 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 喊山,是人双手围在嘴边成喇叭状,对着远方高山发出“喂—喂喂 ...

  9. BZOJ 1821 [JSOI2010]Group 部落划分:MST

    Description 聪聪研究发现,荒岛野人总是过着群居的生活,但是,并不是整个荒岛上的所有野人都属于同一个部落,野人们总是拉帮结派形成属于自己的部落,不同的部落之间则经常发生争斗.只是,这一切都成 ...

  10. java面试题之Thread的run()和start()方法有什么区别

    run()方法: 是在主线程中执行方法,和调用普通方法一样:(按顺序执行,同步执行) start()方法: 是创建了新的线程,在新的线程中执行:(异步执行) public class App { pu ...