前端常用技巧

最新推荐文章于 2024-12-17 09:16:38 发布

原创最新推荐文章于 2024-12-17 09:16:38 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了前端开发中常见的样式调整技巧，如文本溢出隐藏、1px边框适配等，并分享了手机调试电脑页面的方法及解决inline-block元素间距问题的方案。

溢出隐藏

单行

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

多行

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

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

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

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

消除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);
        }
    }
}