<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. HDU - 4054 Hexadecimal View （2011 Asia Dalian Regional Contest）

    题意:按要求输出.第一列是表示第几行.每行仅仅能有16个字节的字母,第二列是16进制的ASCII码.第三列大写和小写转换 思路:纯模拟,注意字母的十六进制是2位 #include <iostre ...

  2. Swift - 获取应用名称、应用版本、设备型号、系统版本等信息

    有时我们在 App 中提交一些统计信息或者用户反馈信息时,为了能更好地进行分析,通常会附带上当前应用程序的名称.版本号.设备型号.以及设备系统版本.下面演示如何获取这些信息. 1,效果图 程序启动后自 ...

  3. ASP.NET Core-组件：目录

    ylbtech-ASP.NET Core-组件:目录 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http ...

  4. Python学习历程之面对对象浅识

    # ===============================封装====================================# class Bar:# def __init__(se ...

  5. c++面向对象程序设计 课后题 答案 谭浩强 第四章

    c++面向对象程序设计课后题答案 谭浩强 第四章 1: #include <iostream> using namespace std; class Complex {public: Co ...

  6. SpringBoot(六) SpirngBoot与Mysql关系型数据库

    pom.xml文件的配置 <dependency> <groupId>org.springframework.boot</groupId> <artifact ...

  7. MySQL监控SQL及命中率脚本

    [root@hank-yoon scrips]# vi mysqlstat.sh​​​/export/servers/mysql/bin/mysqladmin -P3306 -uyoon -pyoon ...

  8. 杭电 4508 湫湫系列故事——减肥记I【完全背包】

    解题思路:因为食物是可以随便吃的,所以是完全背包,卡路里代表消耗,幸福感代表价值,套公式就可以做了. Problem Description 对于吃货来说,过年最幸福的事就是吃了,没有之一! 但是对于 ...

  9. 记一次redis-cluster的切换

    # redis-cli -h 10.5.8.18 -c -p 8001 cluster nodes|grep master 6d2f817064a10631648f24f450a37237b3d53f ...

  10. 深入剖析 iOS 性能优化

    问题种类 时间复杂度 在集合里数据量小的情况下时间复杂度对于性能的影响看起来微乎其微.但如果某个开发的功能是一个公共功能,无法预料调用者传入数据的量时,这个复杂度的优化显得非常重要了.上图列出了各种情 ...