<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. 数论（同余+hash）

    Time Limit:3000MS Memory Limit:65536KB Description You are given a sequence a[0]a[1] ... a[N-1] of d ...

  2. 使用gridlayout布局后，因某些原因又删除，并整理文件夹结构时，Unable to resolve target &#39;android-7&#39;

    出现的问题 [2013-01-11 10:52:39 - gridlayout_v7] Unable to resolve target 'android-7' 事由:在一次做九宫格时.误使用了gri ...

  3. DB-SQL-MySQL-杂项-调优：Mysql千万以上数据优化、SQL优化方法

    ylbtech-DB-SQL-MySQL-杂项-调优:Mysql千万以上数据优化.SQL优化方法 1.返回顶部 1. 1,单库表别太多,一般保持在200以下为宜 2,尽量避免SQL中出现运算,例如se ...

  4. checkbox的使用总结

    1 checkbox如何选中时显示内容,不被选中时隐藏内容 <!DOCTYPE html> <html> <head> <meta name="vi ...

  5. APNs推送

    消息推送是可以指定声音的.譬如你可以对正面的反馈使用欢快的声音,对负面的反馈使用低沉一点的声音,都可以达到别出心裁让人眼前一亮的目的.你需要先放一些aiff.wav或者caf音频文件到app的资源文件 ...

  6. IE,表头固定

    <html>  <head>   <title>表头固定</title>    <style type="text/css"& ...

  7. Custom Hosting in IIS/WAS

    常常需要与宿主实例进行交互.这对于使用自托管的方式是不可或缺的.当使用IIS或WAS时,不能直接访问宿主.为了克服这个障碍,WCF提供了一个宿主工厂.在.svc文件中使用Factory标签,使用此工厂 ...

  8. 发现个很变态的css问题，记录下。

    注意看Ul:nth-child(){} 本来是一一对应的,因为后来改版在div中加了<h1></h1>标记后,竟然自动后移了.... 不可思议,莫明奇妙

  9. js中，实现对键盘按键的监听：

    <script> function keyUp(e) { var currKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode; ...

  10. UVa 10106 Product 【大数相乘】WA

    虽然是错的代码,但是还是想贴出来,最开始WA发现是没有考虑到乘积为0的情况,后来把a*0,0*a,a*0---0(若干个0),0--0(若干个0)*a都考虑进去了:可是还是WA,实在不懂先留在这儿. ...