<picture>

  <source media="(min-width: 1000px)" srcset="kookaburra_large_1x.jpg 1x, kookaburra_large_2x.jpg 2x">

  <source media="(min-width: 500px)" srcset="kookaburra_medium_1x.jpg 1x, kookaburra_medium_2x.jpg 2x">

  <img src="kookaburra_small.jpg" alt="The kookaburra: a terrestrial tree kingfisher native to Australia and New Guinea">

</picture>

http://udacity.github.io/responsive-images/examples/3-08/pictureFullMonty/

[CSS3] The picture element的更多相关文章

  1. A Complete Guide to the <Picture> Element

    If you’ve ever struggled building responsive websites, this post is for you. It’s part of a series o ...

  2. 【转】像素 Pixel (Picture Element)

    原文链接:https://blog.csdn.net/zssureqh/article/details/78768942 1.像素Pixel 讲到概念,首选Wiki百科.当然我说的是英文版Pixel ...

  3. [CSS3] Define Form Element States with CSS Form Pseudo Classes

    Using just semantic CSS Pseudo-Classes you can help define important states for form elements that e ...

  4. CSS3基础入门02

    CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...

  5. 第四章 CSS3概述

    1.CSS3新增常用选择器(1)结构性伪类选择器:root 文档根元素 :nth-child(n) 第N个子元素"first-child 第一个元素 :kast-child 最后一个子元素 ...

  6. CSS3常用选择器

    一.基本选择器 子元素选择器 概念:子元素选择器只能选择某元素的子元素语法格式:父元素 > 子元素 (Father > Children)兼容性:IE8+.FireFox.Chrome.S ...

  7. 转载：轻量级浏览器特性检测库：feature.js

    feature.js是一个很简单.快速和轻量级的浏览器特性检测库,它没有任何依赖,体积压缩最后只有1KB,它可以自动初始化,在你需要知道某个特性是否可用时,直接引入即可.以下中文为个人理解. /*! ...

  8. HTML5之图片在Retina屏的常用几种处理方式

    Media Queries使用css3的媒体查询实现高清屏的图片处理. @media only screen and (-webkit-min-device-pixel-ratio: 1.5), on ...

  9. 现代3D图形编程学习-基础简介(2) (译)

    本书系列 现代3D图形编程学习 基础简介(2) 图形和渲染 接下去的内容对渲染的过程进行粗略介绍.遇到的部分内容不是很明白也没有关系,在接下去的章节中,会被具体阐述. 你在电脑屏幕上看到的任何东西,包 ...

随机推荐

  1. spring的关于数据源的datasource接口的深入理解

    1.DataSource的接口这是一个spring接口,可以获取数据库的Connection.是标准化的,取得连接的一种方式. 默认市面上有两个数据库连接池实现了spring的datasource接口 ...

  2. ios基础-分辨率适配

    (一)分辨率定义 分辨率,是指单位长度内包括的像素点的数量,它的单位通常为像素/英寸(ppi).描写叙述分辨率的单位有:(dpi点每英寸).lpi(线每英寸)和ppi(像素每英寸). (二)ios分辨 ...

  3. XTU1201:模和除

    题目描写叙述 两个整数x和y,满足1<=x<=a,1<=y<=b 且x%y等于x/y的x和y的对数有多少? x%y是x除以y的余数, x/y是x除以y的商,即整数除. 输入 不 ...

  4. MySQL List分区（三）

    具体介绍请看   MySQL分区一 样例:该样例为本人个人学习总结分享

  5. 利用机器学习进行DNS隐蔽通道检测——数据收集，利用iodine进行DNS隐蔽通道样本收集

    我们在使用机器学习做DNS隐蔽通道检测的过程中,不得不面临样本收集的问题,没办法,机器学习没有样本真是“巧妇难为无米之炊”啊! 本文简单介绍了DNS隐蔽通道传输工具iodine,并介绍如何从iodin ...

  6. 分析性能瓶颈的视图：v$session_wait

    这是一个寻找性能瓶颈的关键视图.它提供了任何情况下session在数据库中当前正在等待什么(如果session当前什么也没在做,则显示它最后的等待事件).当系统存在性能问题时,本视图可以做为一个起点指 ...

  7. 解决Highcharts指针偏离的问题

    Highcharts 在初始化3D柱状图 时 (注意:3D图形会发生偏移,2D显示正常) 如果加入 shared: true,属性,则可能会导致柱 状图 toolTip提示框偏移,解决方法是去掉或注释 ...

  8. HD-ACM算法专攻系列（15）——Quoit Design

    问题描述: 源码: 经典问题——最近邻问题,标准解法 #include"iostream" #include"algorithm" #include" ...

  9. 【转】.NET MVC控制器分离到类库的方法

    在.ASP.NET MVC的开发中,我们创建完项目之后,ASP.NET MVC是已Model-Controller-View的形式存在的,在创建项目自动生成的内容上Model我们很容易分离成类库,所以 ...

  10. 基于Socket的Winform例子

    一.直接上效果图 二.Socket握手 三.服务端 Thread threadWatch = null;// 负责监听客户端的线程 Socket socketWatch = null;// 负责监听客 ...