A1570555124的博客

前置条件： 移动端适配使用的是如下适配方案, 也就是使用的rem作为适配。html{ font-size: 13.333333vw;}body { font-size: 0.14rem; // 等于 14px}问题现状: 移动端页面在pc端页面显示异常先写一段简单的vue代码，生成4个盒子和一个顶部fixed定位的盒子。<div class="list" v-for="i in 4" style="height: 1rem;border: 1px solid;">

起因： 如标题所示，还被运营吐槽了，为什么别人的没有解决：body,html { width: 100%; height: 100%; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden;}需要滚动的地方加overflow-y: auto;其他方案参考...

起因： 活动需求需要使用弹幕的形式展示内容解决： 首先是找到一个vue-baberrage然后使用起来看起来也没有什么问题，最后当我打开浏览器rendering的paint flash发现重绘严重最后找到一个vue-danmaku 组件，发现不会频繁重绘定位：弹幕移动使用transform改变位置，并使用will-change进行优化will-change属性通过告诉浏览器什么属性、什么元素将会发生变化，可以对这些操作进行可能性的优化，由此提高CSS动画的执行效率大量的节点动画渲染可以选

起因： 中间内容需要减去顶部与底部内容原先使用 100 vh - 245px, 发现pc端浏览器显示正常，移动端除了chrome与safria都显示正常。定位： 排查得知，这两个浏览器得vh包括了搜索栏与，底部便签栏的高度。解决： 采用 vh-checknpm i vh-check -s在vue中main.js引入import vhCheck from "vh-check";vhCheck('browser-address-bar');使用： height: calc(100vh

事情是这样的，一开始本地开发使用hash模式，后来改为history模式，部署到线上一看???, App。vue渲染了，router-view没渲染？什么鬼？看了下vue-router配置const router = new VueRouter({ base:'/haiwai/aa/temp/', mode:'history', routes,});在看下nginx配置location /haiwai/aa/temp { root html/; try_files $uri $