20190505

1. clearfix清除浮动：

.clearfix::after{
  content: "";
  clear: both;
  display: table;
}
.clearfix::before{
  content: "";
  display: table;
}

2. 响应式开发

css像素:  css的px

物理像素 设备像素

视口: 

   布局视口、视觉视口和理想视口

媒体查询： 0～320px，320px～550px，550px～768px以及768px～960px

vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度

https://www.zhangxinxu.com/wordpress/2016/08/vw-viewport-responsive-layout-typography/ rem配合vw实现自适应

 postcss-px-to-viewport

3. 2x,3x图的使用方式

为什么会有2x，3x图? 因为不同手机的设备像素不一样，同样尺寸的ios， iphone7 和 iphone8都是375px宽，但是他们1*1px中的像素点不同，7里面其实容纳了2*2个像素点， 8中是3*3个像素点。 就是dpr不一样。所以一张图同时在不同dpr的手机上，清晰程度就会不一样。 这个时候可以用img的srcset属性来解决这个问题

<img width="100" height="100" src="image100.png" srcset="image200.png 2x,image300.png 3x"/>

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

<picture>
    <source srcset="painted-hand-298-332@2x.jpg" media="(min-width: 800px)">
    <img src="painted-hand-298-332.jpg" />
</picture>

4. img 的srcset属性和sizes属性

https://www.zhangxinxu.com/wordpress/2014/10/responsive-images-srcset-size-w-descriptor/

5.  picture标签

​<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml">
  <img src="mdn-logo.png" alt="MDN">
</picture>

6. vue报错： there are modules with names that only differ in casing 

原因： 组件名不正确（组件名大小写出错）

7. css实现图片翻转效果

backface-visiability: 隐藏元素的背面属性

perspective:

preserve-3d:

8. nrm切换npm的源： nrm ls, nrm use xx

转载于:https://my.oschina.net/u/4085373/blog/3056145