前端常用技巧

溢出隐藏

1. 单行

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

2. 多行

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

因使用了WebKit的 CSS 扩展属性，该多行隐藏方法适用于WebKit浏览器及移动端；

如何用手机访问电脑调试页面

1. 把地址中的localhost改为本机ip（ipconfig查询ip）
2. 打开草料二维码网站，把地址贴入并生成二维码
3. 手机扫描二维码即可访问（手机与电脑在同一个局域网）

消除inline-block间距

父元素font-size: 0，子元素设置需要的文字大小即可

如何卸载模块

npm uninstall xxx
npm uninstall xxx -g

cnpm uninstall xxx
cnpm uninstall xxx -g

如何退出vue实时监听

输入命令行^c即可

移动端 dpr 及像素问题

iPhone6 的 dpr 为2，即 pc 端的 1px 在 iPhone6 上显示为 2px

由于设备像素比的原因，1px border在不同设备像素比的设备中粗细不一样。利用媒体查询和min-device-pixel-ratio就可以实现货真价实的1px border：

// scss代码
%border-1px{
    display: block;
    position:absolute;
    left: 0;
    width: 100%;
    content: ' ';
}
.border-1px{
    position: relative;
    &::after{
        @extend %border-1px;
        bottom: 0;
        border-top: 1px solid #ccc; 
    }
    &::before{
        @extend %border-1px;
        top: 0;
        border-bottom: 1px solid #ccc;
    }
}


@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
    .border-1px{
        &::after{
            -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
    }
}

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-1px{
        &::after{
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
}

Flex

阮一峰 flex 布局教程语法篇，实例篇

自动添加css兼容

Postcss根据 can i use 官网去写代码，自动生成兼容性代码