<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. Linux用户管理案例(第二版)

    批量添加用户 1.按照/etc/passwd文件格式编写用户信息文件users.info xiaofang01::1001:503::/home/xiaofang01:/bin/bash  #注意不能 ...

  2. Llama－impala on yarn的中间协调服务

    本文基于CDH发行版下的Hadoop Yarn和Impala 早期的Impala版本号中.为了使用Impala.我们一般会在以Client/Server的结构在各个集群节点启动impala-serve ...

  3. EntityFramework 找不到方法:“Void System.Data.Entity.DbModelBuilder.RegisterEntityType

    问题原因,EF当前版本没有该方法,将EF版本升级即可. 1.packages.config <package id="EntityFramework" version=&qu ...

  4. Shiro 学习应用（续）

    在前面的文章中为大家介绍了 Shrio 的基础概念.可能比較笼统.没有深入到开发过程的一些问题.如今集中在本帖中归纳一下有关问题. FormAuthenticationFilter 表单过滤器 表单过 ...

  5. $scope angular在controller之外调用

    1.定义 var m = angular.module('ddd',[]); m.controller('ctrl',['$scope',function ($scope) { }]); 2.外部调用 ...

  6. 2.linux系统命令详解

    1 shell shell:命令解释器,根据输入的命令执行相应命令. 1.1 shell家族 察看当前系统下有哪些shell: cat /etc/shells 察看当前系统正在使用的shell ech ...

  7. net 线程挂起

    2013.10.18  通讯组件开发 情景: 主线程添加队列,子线程负责队列中消息发送.当队列中数据为空时,停止发送挂起子线程. 当主线程添加队列时,重新开启子线程进行消息发送. 方案一 但是不采用传 ...

  8. git提交不用每次都输入用户名密码

    克隆项目二种方式: 1. 使用https url克隆,   复制https url 然后到 git clone https-url 2.使用 SSH url 克隆却需要在克隆之前先配置和添加好 SSH ...

  9. javascript中DOM基础知识介绍

    1.1.     基本概念 1.1.1.      DOM DOM Document Object Model 文档对象模型 就是把HTML文档模型化,当作对象来处理 DOM提供的一系列属性和方法可以 ...

  10. 从EntityFramework转换EntityFrameworkCore的正确姿势（DBFirst）

    今天有一个小任务:要把一个数据的数据搬运到另一个数据库(两个数据库的数据结构很不一样). 决定用.net core  console app来跑,并且采用entityframework 去做数据CRU ...