乐趣区

关于前端:总会用到的前端小姿势

工作中总结的一些常见的前端问题解决计划,继续总结与记录,下班能力更欢快地摸鱼 (划掉)

CSS 篇

0. 文本主动换行 bug

假如一个宽度固定的 div 内有一段文字,那么浏览器默认解决形式会比拟傻,纯中文下乍一看没问题,但英文与数字混搭等状况容易呈现 bug,此时解决办法有两种 css 办法:

word-wrap: break-word; // 对过长单词会先另起一行
word-break: break-all; // 粗犷地拆掉单词并换行,比拟罕用 

1. css 实现 iPhone 系列黑边适配

以往的 iPhone X 适配比较简单粗犷,通常是正则判断机型来做出相应解决,现在须要适配的 iPhone 机型早已不止 X 系列,好在 css 有对应的解决计划,十分实用,那就是 viweport-fit 属性:

须要设置页面内容齐全笼罩整个窗口:

<meta name="viewport" content="width=device-width, viewport-fit=cover">

只有设置了 viewport-fit=cover,env() 才失效,依据状况来应用:

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

也能够应用计算属性:

calc(55px +  constant(safe-area-inset-bottom))

2. 文本超出省略

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /** 最大行数 **/
overflow: hidden;

4. ios 滑动不晦涩

overflow: auto;
-webkit-overflow-scrolling: touch;

5. 暗藏 div 滚动条

div::-webkit-scrollbar {display: none;}

6. 程度垂直居中

相对定位,须要申明宽高

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

flex,父级管制,比拟罕用

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

grid,父级管制,更简洁

.parent {
    display: grid;
    place-items: center;
}

7. div 可编辑

富文本编辑器原理

<div contenteditable="true"></div>

8. cslc

我的项目中罕用 css 预编译,css 计算表达式个别很少用到,且可能存在性能问题。然而须要的时候应用还是挺不便的,比方下面 iphone 黑条的适配。

div {width: calc(10rem - 20px + 5%);
}

JS 篇

0. ios audio 无奈自动播放、循环播放的问题

var music = document.getElementById('video');
var state = false;

document.addEventListener('touchstart', function(){if(state == false){music.play();
        state = true;
    }
}, false);

// 微信浏览器
document.addEventListener("WeixinJSBridgeReady", function () {music.play();
}, false);

// 循环播放
music.onended = function () {music.load();
    music.play();}

1. 在 ios 中日期格局显示不能为 ”-“,否则会呈现谬误。

const date = '2019-01-01'

const newDate = new Date(date.replace(/-/g, '/'))

此问题只呈现在 ios,安卓和 PC 都能辨认。

退出移动版