What if the image won't be displayed at the full viewport width? Then you need something more than srcset, which assumes the image will be full viewport width. Add a sizes attribute to the image with a media query and a vw value. srcset and sizes tog…

响应式图片可以根据不同的设备屏幕大小从而选择加载不同的图片,从而节省带宽.实现响应式图片有三种方法:srcset+sizes属性.picture标签.svg 1. srcset+sizes srcset是img标签的一个属性,它可以提供一系列图片源,供浏览器在不同设备屏幕大小和像素密度下选择适合的图片.W3C规范中的描述:srcset属性允许作者根据不同分辨率或不同视窗尺寸提供多个不同分辨率图像.用户代理会根据之前获取的任何资源做选择,从而避免多个资源加载浪费带宽和相关性能问题. 使用语法如下:…

更新 : 2019-02-21 除了写 srcset sizes 还有一种 x1, x2, x3, x4 的写法. 我们对比一下 假设 pc 希望是 1000w mobile 希望是 300w size 的写法是 if device == 300w use 300w, else if device == 1000w use 1000w (这里写的应该是 css media query, 但是我用 js 来表达就好) 游览就会通过匹配 device width 然后自动乘与用户的 retina 去…

我想让鼠标放在div上就让它旋转变大,离开div后它又恢复本来的样子. 于是我就想写一个JS,监听一个hover事件,当hover发生的时候,触发一个计时器,在计时器里写两个值,一个管角度,一个管宽度,随着时间的变化逐渐增加,不断地重写div的style.当达到我期望的limit的值后让它停止(或者干脆解除计时器). 再监听一个leave事件,当leave发生后,让一切以它原来的style为limit的方向变化.(所以一开始就要get到这个div最初的style并且保存好) 然而事实上这个用CS…

Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模板引擎.数据可视化.时间轴.编辑器等. 前端MVC框架与库 angular.js - 前端MVVM框架,支持双向绑定,实现MVC架构,增强Web应用 aurelia - A Javascript client framework for mobile, desktop and web. backbo…

feature.js是一个很简单.快速和轻量级的浏览器特性检测库,它没有任何依赖,体积压缩最后只有1KB,它可以自动初始化,在你需要知道某个特性是否可用时,直接引入即可.以下中文为个人理解. /*! * FEATURE.JS 1.0.0, A Fast, simple and lightweight browser feature * detection library in just 1kb. * * http://featurejs.com * * CSS 3D Transform, CSS…

这是基于官方手册整理制作的,因为那个手册网页打开很慢,所以就整理在这里了.以备不时之需. Syntax   Child: > nav>ul>li <nav> <ul> <li></li> </ul> </nav> Sibling: + div+p+bq <div></div> <p></p> <blockquote></blockquote> C…

If you’ve ever struggled building responsive websites, this post is for you. It’s part of a series on responsive design, in particular responsive images, pulled from my book, Responsive Web Design. If you find this excerpt useful, and want even more…

葵花宝典终可成,半途而废万事空. 官方地址:http://docs.emmet.io/cheat-sheet/ 我导出了pdf版,需要的同学可以下载: 链接:http://pan.baidu.com/s/1eQ74eSM 密码:laz1 Syntax   Child: > nav>ul>li <nav> <ul> <li></li> </ul> </nav> Sibling: + div+p+bq <div&g…

1.设备像素(device pixel): 设备像素是物理概念,指的是设备中使用的物理像素.CSS像素(css pixel): CSS像素是Web编程的概念,指的是CSS样式代码中使用的逻辑像素.通过设备像素比,便可得知设备像素与CSS像素之间的比例.当这个比率为1:1时,使用1个设备像素显示1个CSS像素.当这个比率为2:1时,使用4个设备像素显示1个CSS像素,当这个比率为3:1时,使用9(3*3)个设备像素显示1个CSS像素<img srcset="small.jpg 450w ,l…