<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. Hit 2255 Not Fibonacci

    今天下午刚起来眼睛就比較涨,,并且还有点恶心,唉.结果一直不在状态.并且这个题太坑了.. .. 点击此处即可传送 Hit 2255 Maybe ACMers of HIT are always fon ...

  2. Toast分析——实现自己的Toast

    android 4.0以后,新增了一个功能:关闭某个应用发出的通知.Toast等.详细操作为:打开应用安装列表.找到要屏蔽的应用(长按通知,点击弹出的"应用信息",就可以跳到应用信 ...

  3. Redis通过命令行进行配置

    redis 127.0.0.1:6379[1]> config set requirepass my_redis OK redis 127.0.0.1:6379[1]> config ge ...

  4. angularjs1-5，class，

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. POJ 3185 DFS

    好像可以用高斯消元??? 但是用搜索写 这题就很水了... // by SiriusRen #include <bitset> #include <cstdio> using ...

  6. Load和CPU利用率是如何算出来的

    相信很多人都对Linux中top命令里“load average”这一栏困惑过,到底什么是Load,Load代表了什么含义,Load高会有什么后果?“%CPU”这一栏为什么会超过100%,它是如何计算 ...

  7. Android Studio 一些注意事项（自用，不定期更新）

    1,Android Studio 版本的选择 写这篇的时候,官方版本已经到了 v3.2.0,而我习惯使用的版本是 v2.3.1,因为这个版本有自带sdk的安装版,比较方便, 同时,v2.3.1 新建项 ...

  8. MarkDown 语法备份

    标题 标题1 标题2 标题3 标题4 标题5 无序列表 飞雪连天射白鹿 书神侠倚碧鸳 有序列表 飞雪连天射白鹿 笑书神侠倚碧鸳 超链接 百度 图片 粗体和斜体 粗体 斜体 表格 左对齐标题 右对齐标题 ...

  9. C# 3.0的新特性

    自动属性. 之前定义属性的步骤: private filed + public property. 现在的形式:int id{get;set;}. 可以分别设置get/set的保护级别(protect ...

  10. Navicat for Mysql 关于1130错误，无法正常方法解决的解决办法。

    本人因为失误操作,不小心将mysql 玩崩了.导致一直报1130错误,无法进入. 看了很多网上的帖子,但是那些办法都行不通.最后通过好友的指点,解决了这个问题.   1.停止MySQL服务,执行net ...