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. 前端开发中提到的“脚手架”到底指什么，CLI？gulp 和 gulp-cli有什么区别

    一般来说,脚手架是帮你减少「为减少重复性工作而做的重复性工作」的工具. gulp和gulp-cli的区别可以看这个task - what does gulp-"cli" stand ...

  2. Web框架之Django_03 路由层了解（路有层 无名分组、有名分组、反向解析、路由分发 视图层 JsonResponse，FBV、CBV、文件上传）

    摘要: 路由层 无名分组 有名分组 反向解析 路由分发 名称空间 伪静态网页.虚拟环境 视图层 JsonResponse FBV 与 CBV(function base views与class bas ...

  3. LeetCode（72） Edit Distance

    题目 Given two words word1 and word2, find the minimum number of steps required to convert word1 to wo ...

  4. eval() 函数 解析json对象

    eval在js中用来运行以js源码组成的字符串. 可以用来改变全局或者局部变量,例如: var globalEval = eval; //定义全局eval函数别名 var a ='global', b ...

  5. printf和scanf中的%控制

    输出函数的格式字符:printf(): 附加的格式说明符: 格式输入函数的格式控制符:scanf(): 版权声明:本文为博主原创文章,未经博主允许不得转载.

  6. 使用systemctl命令管理服务mysql

    启动mysql systemctl start mysqld.service 停止mysql systemctl stop mysqld.service 重启mysql systemctl resta ...

  7. PHP过滤器 filter_has_var() 函数

    定义和用法 filter_has_var() 函数检查是否存在指定输入类型的变量. 如果成功则返回 TRUE,如果失败则返回 FALSE. 语法 filter_has_var(type, variab ...

  8. EasyUI combogrid 赋多个值

    var values = []; for (var i = 0; i < rows.length; i++) { if (rows[i].id>0 ) { values.push('' + ...

  9. UTF-8转字典

      NSString *textStr = ] forKey:[string substringToIndex:range.location]];     }];     NSLog(@"% ...

  10. weixin-api生成二维码

    二维码长链接转成短链接(减少扫描时间和提高成功率) 微信返回正确的二维码的结果,参数有个url,即二维码图片解析后的地址,也可以根据此URL生成需要的二维码图片,而不需要通过ticket去换取图片了 ...