乱点技能树系列

发表于   |   分类于   |  

1. 响应式图片

  • html中选择： srcset+ dpr
1
2
3
4
<img srcset="
  examples/images/image-384.jpg 1x, 
  examples/images/image-768.jpg 2x
" alt="…">
  • css media query+ dpr
1
2
3
4
5
6
7
8
9
10
.img {
  background-image: url(examples/images/image-384.jpg); 
}
@media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 192dpi) { 
  .img {
    background-image: url(examples/images/image-768.jpg);
  }
}


这种方法还可以这么写。


1
2
3
4
5
    <picture>
  <source srcset="extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="large.jpg" media="(min-width: 800px)">
  <img srcset="medium.jpg" alt="…">
</picture>

  • sizes in css + srcset

    1
    2
    3
    4
    5
    <img
    sizes="(min-width: 400px) 80vw, 100vw"
    srcset="examples/images/small.jpg 375w,
         examples/images/big.jpg 1500w"
    alt="…">

浏览器通过计算不同大小的图片的 size/(视图尺寸dpr) ，选择最接近1的。比如上面就是
375/(3202） 1500/(320*2)。假设像素比为2.

2. CSS变量和预处理变量有什么不同

css变量可以跟预处理变量达到同样的效果。同时在js中还可以访问到这些变量（属性）。那么就可以达到这样的效果： 通过js改变这些变量来统一变更样式，这样的好处是可以实现响应式栅格这种，嗯，楼主还想到了一键换肤=。=。

3. underscore学习

curry化

将很多参数转为连锁的函数调用

1
2
3
4
5
var property = function(key) {
   return function(obj) {
     return obj == null ? void 0 : obj[key];
   };
 };
void 0代替undefined原因
  • undefined在低版本浏览器中可以被重写，在局部作用域内也可以被重写（包括chrome）。

  • 那么该用什么来代替
    undefined： void+表达式

    1
    void (3+4)  //undefined

  • 除此之外，void 0要比undefined空间小，省下不少字节。