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. 启动myeclipse出现JVM terminated. Exit code=-1

    在启动myeclipse时出现如图: 解决方法 第一种: myeclipse.ini中内存设置过大导致 修改: 256m改成128m,512m 改为 256m. 第二种:在myeclipse.ini ...

  2. Python网络爬虫（Get、Post抓取方式）

    简单的抓取网页 import urllib.request url="http://google.cn/" response=urllib.request.urlopen(url) ...

  3. Android自动化测试Uiautomator--UiDevice接口简介

    Uiautomator主要分为UiDevice, UiObject, UiScrollable, UiSelector, UiCollection几个类. getUiDevice()方法可以得到一个U ...

  4. python基础学习笔记——os模块

    #OS模块 #os模块就是对操作系统进行操作,使用该模块必须先导入模块: import os #getcwd() 获取当前工作目录(当前工作目录默认都是当前文件所在的文件夹) result = os. ...

  5. Linux基础命令详解-2

    本篇详解的命令有以下30个 1.rmdir 功能:删除一个空目录   2.telnet 功能:使用telnet协议连接到主机的指定端口 3.vim 功能:编辑器之神 vim三种模式的功能及其转换   ...

  6. TOJ 4815: 关押罪犯

    4815: 关押罪犯 Time Limit(Common/Java):10004MS/12000MS     Memory Limit:65536KByte Total Submit: 2       ...

  7. 九度oj 题目1179：阶乘

    题目描述: 输入n, 求y1=1!+3!+...m!(m是小于等于n的最大奇数)y2=2!+4!+...p!(p是小于等于n的最大偶数). 输入: 每组输入包括1个整数:n 输出: 可能有多组测试数据 ...

  8. （转）iOS字体

    一.iOS原生字体展示 在 label中选择字体的font,并把font由system改成custom后,就能在family中看到72种特殊字体.这些里面就有很炫的字体,但 是全部是只针对英文数字,对 ...

  9. spring aop在mvc的controller中加入切面无效

    spring aop在mvc的controller中加入切面无效 因为MVC的controller,aop默认使用jdk代理.要使用cglib代理. 在spring-mybatis.xml配置文件中加 ...

  10. 洛谷 [P2953] 牛的数字游戏

    SG搜索 n的范围在可以接受的范围内,SG搜索即可 #include <iostream> #include <cstdio> #include <cstring> ...